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

Question

如何将以下CSS变成更整齐合理的结构。如果仔细检查以下代码。你可以发现ul项实际上占据了一行之前，而不是包含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

认沽溢出：隐藏;在那个ul。

Answer 3

第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步 - 添加类成HTML UL

<ul class="cf"> 

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