0

为什么我将“#header ul li”设置为向左浮动时黄色条纹（#header）消失了；? 为“#header ul li”设置了固定大小后，我希望 li 元素并排放置，而不是更多。3 * 100px 的宽度不足以覆盖在整个页面上水平延伸的#header。

HTML：

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#header {
    background: yellow;
}
#header ul {
    list-style-type: none;
}
#header ul li {
    background: pink;
    width: 100px;
    float: left; // <--- here!
}
</style>
</head>
<body>
<div id="header">
<ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>

</ul>
</div>
</body>
</html>
4

3 回答 3

1

因为浮动元素是从内容流中取出的：

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。但是，浮动旁边创建的当前和后续行框会根据需要缩短，以便为浮动的边距框腾出空间。

您必须使用<div style="clear:left;"></div>才能更正此问题：

<div id="header">
<ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
</ul>
<div style="clear:left;"></div>
</div>
于 2013-01-11T21:41:56.750 回答
0

当浮动子元素时，您需要overflow:auto;在父元素上设置以使其扩展以覆盖它们的宽度和高度：

jsFiddle 示例

#header {
  background: yellow;
  overflow:auto;
}
于 2013-01-11T21:41:42.167 回答
-1

由于您通过浮动将 li 从文档流中取出，因此您必须在 ul 上设置显式高度或使用清晰的 div 将 #header 的高度“推”过 ul。

<div id="header">
    <ul>
    <li></li>
    </ul>
<div class="clear"></div>
</div>

.clear {clear:both;}

jsFiddle http://jsfiddle.net/QHrwZ/1/

于 2013-01-11T21:42:28.667 回答