19

我有一个名为 NAV 的 div，在 NAV 内部我有一个 5 li 的 UL，我向左浮动，即 li 是，但当我这样做时，NAV 会崩溃。我知道这一点，因为我在 NAV 周围设置了一个边界，以查看它是否崩溃并且确实如此。这是示例。

折叠 http://img401.imageshack.us/img401/8867/collapsedze4.png

没有折叠 http://img71.imageshack.us/img71/879/nocollapsedkx7.png

正如您在第一张图片中看到的那样，NAV div 中的链接向左浮动，顶部的黑色边框是称为 NAV 的实际 div。

在这张图片中，您可以看到它如何具有顶部和底部边框并且它没有折叠。

这是我使用的一些html和css。

替代文字 http://img301.imageshack.us/img301/5514/codejc8.png

#nav #ulListNavi  a  {
    float: left;
}
4

9 回答 9

37

添加容器overflow以外的任何值：visible

div#nav { overflow:auto; }

然后添加width恢复宽度

div#nav { width: 100%; overflow:auto; }
于 2009-11-20T14:42:30.240 回答
15

一种解决方案是在最后一个浮动锚之后向元素添加“clear:both”样式，例如：

<div id="nav">
  <ul id="ulListNavi">
    <li><a href="#">Home</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Flowers</a></li>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <div style="clear:both;"></div>
</div>

这会导致包含元素在关闭包含框之前清除所有浮动元素。

于 2008-12-16T04:13:58.927 回答
5

在这里清除浮动的其他一些选项：

http://www.quirksmode.org/css/clearing.html

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

至于最好的方法，这几乎是一场圣战，纯粹主义者会对额外的 div 感到害怕，如果你不被一点额外的标记所困扰，那么按照 Joshua 和 AJ 的建议添加已清除的 div 就可以了，并且是一种可靠的技术，但至少还有 17 种其他方法可以做到这一点......

于 2008-12-16T04:29:17.273 回答
4

在您的 ul 之后添加此代码：

<div style="clear: both"></div>
于 2008-12-16T04:12:01.020 回答
2

尝试将包含元素也浮动到左侧。

于 2008-12-16T04:08:40.887 回答
2

您的问题是因为您正在浮动<A>元素，但它们中的每一个都在一个<LI>元素内。LIs 默认显示为块，因此每个<LI>都强制它的孩子<A>从新行开始。

如果你浮动<LI>s，我想你会解决你的问题。

#nav #ulListNavi  li  {
    float: left;
}
于 2011-12-14T11:40:00.607 回答
2

不要为清除元素或溢出而烦恼。添加这个：

#nav {
    float: left;
}

当您浮动 LI 时，#nav 不再“包含”任何内容，因此它会崩溃。但如果 #nav 也是浮动的，则它包含浮动在其中的任何内容，因此它会再次展开。

（还可以考虑删除#nav div 并将相同的样式应用于 UL。）

于 2009-11-20T15:01:53.130 回答
1

最快的解决方案是添加溢出：隐藏以清除父元素上的浮动：

#nav{overflow:hidden;}
于 2013-02-20T19:20:07.953 回答
0

在不更改 HTML 的情况下：

#nav
{
    width: 100%;
    overflow: auto;
    border: solid 1px red;
}
#ulListNavi
{
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav #ulListNavi li
{
    float: left;
}
#nav #ulListNavi li a
{
    margin-left: 5px;
}

适用于 IE8 和 FF 3.5

于 2009-11-20T14:50:04.047 回答