css - 顯示三列中的無序列表

Question

我有一個未知數量的無序列表，我想將它們顯示在三列中。一張桌子是一種方式，我得到了這個工作，但我正在考慮也許有一個CSS方法來做到這一點。

每個列表中的項目數量也不同，從列表到列表也是未知的。 我想徵詢意見。表格是否要走到這裏，還是有更好的CSS解決方案？

謝謝！

Answer 1

UPDATE：

對不起小的調整 - 你需要clearfix每個UI的，我會用CSS3第n個孩子的僞選擇以清除每4個UL認證。已經更新JS小提琴也

嘗試這樣的事情...

CSS：

#container 
{ 
    width: 600px; 
} 

#container ul 
{ 
    width: 200px; 
    float: left; 
    margin-bottom: 20px; 
} 

ul:nth-child(4n) { 
    clear:left; 
} 

.cf:before, .cf:after { content: ""; display: table; } 
.cf:after { clear: both; } 
.cf { zoom: 1; } 

HTML：

<div id="container"> 
    <ul class="cf"> 
    <li>foo</li> 
    <li>bar</li> 
    <li>bar</li> 
      <li>bar</li> 
      <li>bar</li> 
</ul> 
<ul class="cf"> 
    <li>foo</li> 
    <li>bar</li> 
</ul> 
<ul class="cf"> 
    <li>foo</li> 
    <li>bar</li> 
</ul> 
<ul class="cf"> 
    <li>foo</li> 
    <li>bar</li> 
</ul> 
<ul class="cf"> 
    <li>foo</li> 
    <li>bar</li> 
</ul> 
</div> 

這裏是一個的jsfiddle鏈接上面： http://jsfiddle.net/beardtwizzle/9EALs/1/

Answer 2

你可以使用div的CSS，here你會找到一個實際的例子。