2012-08-01 63 views
3

展現出來我有一個列表如下:如何樣式列表作爲兩個山坳中的HTML

<ul> 
    <li>1<li> 
    <li>2<li> 
    <li>3<li> 
    <li>4<li> 
    <li>5<li> 
    <li>6<li> 
    <li>7<li> 
    <li>8<li> 
    <li>9<li> 
</ul> 

他們出現在作爲輸出:

1 
2 
3 
4 
5 
6 
7 
8 
9 

我怎麼能他們的風格展現作爲:

1  2 
3  4 
5  6 
7  8 
9 

我需要一個解決方案,在IE上工作,我很高興使用JQuery。

+0

的可能重複(http://stackoverflow.com/questions/974313/how -to-css-a-two-column-list-of-items) – 2012-08-01 11:49:47

+0

嘗試此鏈接http://www.alistapart.com/articles/multicolumnlists – Prashobh 2012-08-01 11:51:40

回答

4

做到這一點的一種方法是給每個列表項定義一個寬度,然後給整個列表定義一個等於兩個列表項的寬度。然後將所有列表項目浮動到左側。

CSS:

li{ 
    padding: 0; margin: 0; 
    width: 4em; 
    float: left; 
} 
ul{ 
    padding:0; margin: 0; 
    width: 8em; 
}​ 

演示:?如何爲CSS項目的兩列列表] jsFiddle