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

Question

如何将以下CSS变成更整洁合理的结构。如果仔细检查以下代码。您可以发现ul项实际上占据了一行，而不是在一个框中包含li项。那么我可以做什么改变来封装所有四个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。