- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我在这里遇到了一个问题,考虑到我正在创建一个简单的导航栏,这个问题特别令人沮丧。我到处寻找解决方案都无济于事,所以希望你们能对此有所启发。发生的事情是,我所有的标签都没有显示在导航栏内,它实际上是在容器外移动,甚至没有显示:内联 block ;在这种情况下工作。希望你们能帮助我。
nav{
width: 100%;
height: 5em;
}
nav ul{
list-style: none;
width: 28%;
}
nav ul li{
float: left;
margin-left: 3%;
}
nav #logo{
width: 30%;
}
nav #logo img{
width: 80%;
}
nav a{
padding-bottom: 1%;
text-decoration: none;
}
nav a:link{
color: black;
}
nav a:hover{
border-bottom: solid black .1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="comp6.css" rel="stylesheet">
<title></title>
</head>
<body>
<nav>
<div id="logo">
<img src="images/logo.png">
</div>
<ul>
<li>
<a href="#"><p>Home</p></a>
</li>
<li>
<a href="#"><p>About Us</p></a>
</li>
<li>
<a href="#"><p>Services</p></a>
</li>
<li>
<a href="#"><p>Blog</p></a>
</li>
<li>
<a href="#"><p>Works</p></a>
</li>
<li>
<a href="#"><p>Contacts</p></a>
</li>
</ul>
</nav>
</body>
</html>
最佳答案
我不知道对你来说什么是强制性的我试过这种方式你可以根据你的需要修改以下内容
/*nav{
width: 100%;
height: 5em;
}
nav ul{
list-style: none;
width: 28%;
}
nav ul li{
float: left;
margin-left: 3%;
}
nav #logo{
width: 30%;
}
nav #logo img{
width: 80%;
}
nav a{
padding-bottom: 1%;
text-decoration: none;
}
nav a:link{
color: black;
}
nav a:hover{
border-bottom: solid black .1em;
}
/****** new styles ********/
nav {
/* width: 100%; */
/* height: 5em; */
/* float: left; */
display: block;
}
nav #logo {
width: 30%;
float: left;
}
nav ul {
list-style: none;
/* width: 28%; */
}
nav ul li {
float: left;
margin-left: 3%;
}
<nav>
<div id="logo">
<img src="images/logo.png">
</div>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Works</a>
</li>
<li>
<a href="#">Contacts</a>
</li>
</ul>
</nav>
我在这里提供我尝试的工作代码 My demo code
关于html - <ul> 流出 <nav>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32086858/
首先是我的 table : mysql> desc invoice; +-------------+-----------------------+------+-----+---------+---
我有一些这样的 HTML: 和 CSS div#container { width:960px; margin:0 auto; } div#main {
我有这个列表: myList = [a, a, a, b, b, a, c, c, b, a] 我想计算每个唯一项目的流入和流出。 “a”的流入 = 出现次数 = 5(当转换进入“a”时) 'a' 的
我制作的布局需要在移动屏幕上可见。目前,当我缩小到移动设备或在我的 iPhone 5 上查看网站时,其中带有较长文本的 div 到处都是。 由于我将所有内容都包装在称为 section0、sectio
所以我在这里遇到了一个问题,考虑到我正在创建一个简单的导航栏,这个问题特别令人沮丧。我到处寻找解决方案都无济于事,所以希望你们能对此有所启发。发生的事情是,我所有的标签都没有显示在导航栏内,它实际上是
如果我在输入字段中单击,填充应该变为零,以便边框紧挨着文本。问题是它保持宽度并因此流出 div 父级;[ div { width: 400px; background-colo
我有一个 UIImage(尺寸 320x480),我想用更小的 UIImageView(尺寸:100x100)显示。 但是当我添加图像时,它会渗透到 UIImageView 及其父 View 中。如何
我们正在尝试将我们的 zip 微服务从 nodejs Express 中的常规应用程序迁移到与 AWS Lambda 集成的 AWS API Gateway。 我们当前的应用程序向我们的 API 发送
我遇到了一个非常奇怪的问题,经过多次尝试和研究我无法摆脱它。我有一个网站,但是一些(只有 5% 的访问者)使用相同版本的 chrome 的人看到文本从 divs 流出并且文本重叠。这很奇怪,因为我使用
这只是我的代码片段。我似乎无法将图像锁定在 div 中,如果我设置 margin-top: 50% 它就会从 div 中流出。我该如何阻止它?我还想在包含它的 div 的死点设置图像。 var twi
我是一名优秀的程序员,十分优秀!