Question

使用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，或者使用overflow：hidden。

设置包含div的样式

在寻找解释为什么会发生这种情况之后，我找到了一个很好的链接来解释所有内容！

http://css-tricks.com/all-about-floats/

Answer 1

诀窍是，使用float's - 使用clearfixes。在您的情况下，在标题结束标记</div>：

之前添加以下内容

<div style="clear: both"></div>

这将使标题拉伸，考虑其中的浮动元素。

Answer 2

在ul之后添加一个div，样式为clear：left; - 我会详细介绍，但我在iPad上，即将上床睡觉。

Answer 3

而不是li css代码中的任何内容，请放置#header li{display: inline;}（以及您的颜色和其他偏好）

float：left for <li>在导航栏上方创建间距</li>

3 个答案: