1

使用 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 的样式：隐藏。

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

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

4

3 回答 3

1

诀窍是，使用浮点数 - 使用 clearfixes。在您的情况下，在标题结束标记之前添加以下内容</div>：

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

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

于 2011-05-27T06:14:48.313 回答
0

在 ul 之后添加一个 div，样式为 clear:left; - 我会更详细地说，但我在我的 iPad 上，即将上床睡觉。

于 2011-05-27T06:14:13.320 回答
0

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

于 2012-03-25T14:34:59.277 回答