css - 如何使 ul 在其内容框中包含 li ？

Question

我怎样才能让下面的CSS变成一个更整洁合理的结构。如果您仔细检查以下代码。您会发现 ul 项目实际上是在一个盒子中占据了 li 项目之前的一行，而不是包含 li 项目。那么我可以做些什么改变让 ul 封装所有四个 li 项目？

演示： http: //fiddle.jshell.net/Gghz8/

效果： http: //fiddle.jshell.net/Gghz8/show/

Answer 1

当在 li 上使用浮点数时，它们会从文档流中取出，这意味着 UL 不再知道其子项的大小，因此无法扩展其大小以适应其子项。

在 UL 上放一个浮子。 http://fiddle.jshell.net/Gghz8/2/

http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

当我开发我的网站时，我会浮动几乎所有内容。它只是有助于保持一致并避免像现在这样的问题。

Answer 2

第 1 步 - 添加 clearfix css

.cf:before,
.cf:after {
   content: " "; /* 1 */
   display: table; /* 2 */
}

.cf:after {
clear: both;
}

/**
* For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
*/

.cf {
   *zoom: 1;
}

第 2 步 - 在 UL 上将类添加到 html

<ul class="cf">

http://jsfiddle.net/Gghz8/3/

Answer 3

放溢出：隐藏；在那个 ul。