浮动：向左
使用 float:left 设置 li 标签的样式是创建水平导航栏的标准方法。但每当我这样做时，整个导航栏列表就会与包含的 div 分离。
删除 float:left 可以解决问题，但我们假设我想这样做。
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div id="header">
<h2>Demo: Navigation Bar</h2>
<ul id="navbar">
<li>
<a href="#">News</a>
</li>
</ul>
</div>
</body>
</html>
CSS
#header {
margin: 10px;
width: 8in;
background-color: green;
margin-left: auto; /* setting margin to auto centers block element */
margin-right: auto; /* width must not be 100% */
}
#header ul { /* ul */
list-style-type: none;
padding: 0;
margin-top: 0px;
}
#header li {
display:block;
float:left;
background-color: silver;
margin: 0;
}
非常感谢任何见解！
编辑： 解决方案是在列表后添加空 div，或使用溢出：隐藏来设置包含 div 的样式。
在寻找发生这种情况的解释后，我发现了一个很好的链接来解释一切！
Styling li tags with float:left is a standard way to create horizontal navigation bars. But whenever I do this, the entire navigation bar list gets separated from the containing div.
Removing float:left would fix the problem, but let's assume I want to do it this way.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div id="header">
<h2>Demo: Navigation Bar</h2>
<ul id="navbar">
<li>
<a href="#">News</a>
</li>
</ul>
</div>
</body>
</html>
CSS
#header {
margin: 10px;
width: 8in;
background-color: green;
margin-left: auto; /* setting margin to auto centers block element */
margin-right: auto; /* width must not be 100% */
}
#header ul { /* ul */
list-style-type: none;
padding: 0;
margin-top: 0px;
}
#header li {
display:block;
float:left;
background-color: silver;
margin: 0;
}
Any insight is much appreciated!
Edit:
Solution is to add empty div after the list, or style the containing div with overflow:hidden.
After looking for an explanation why this happens, I found a great link explaining everything!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
诀窍是，使用浮动 - 使用clearfixes。在您的情况下，请在标头关闭标记
之前添加以下内容：考虑到其中的浮动元素，这将使标头拉伸。
The trick is, working with float's - use clearfixes. In your case, add the following, before header closing tag
</div>:That will make header strech, considering floating elements inside it.
在 ul 后面添加一个 div，样式为clear:left; - 我想讲得更详细，但我正在使用 iPad，正准备去睡觉。
Add a div after the ul with style clear:left; - I would go into more detail, but I'm on my iPad and about to go to bed.
代替 li css 代码中的任何内容，而是放置
#header li{display: inline;}（以及您的颜色和其他首选项）Instead of anything in the li css code, put
#header li{display: inline;}(and your color and other preferences)