如何讓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/