這是可能的列表？

我想知道如果它可能使像這樣的列表： make list like this 這是可能的列表？

或者我應該只使用的div來完成同樣的事情？

2012-02-23 Meisam Mulla

的一種方式，我能想到的，就是有相鄰'div'每到acomodate垂直組三個'li' – check123 2012-02-23 04:27:07

你可以這種類型的列表也使用表格。 – NewUser 2012-02-23 04:27:44

@newuser你可以使用一個表，但只有當數據是表格數據時，否則它很難維護和濫用表元素應該被用於什麼。 – 2012-02-23 04:43:23

這是possbile純CSS（浮動），以得到這樣的列表：

LI1 LI2 
LI3 LI4 
LI5 LI6

但要獲得：

LI1 LI4 
LI2 LI5 
LI3 LI6

你需要使用JavaScript或2列出了與css造型。（編輯：或作爲另一個答案由cale_b提到，現代瀏覽器，你可以使用column-count）

的CSS我的第一個場景會是這個樣子：

ul { width:400px; overflow:hidden; margin:0; padding:0; } 
li { width:200px; float:left; margin:0; padding:0; }

調整寬度，邊距和補到你當然喜歡

來源

2012-02-23 04:27:05

這正是我一直在尋找的感謝！ – 2012-02-23 04:28:40

沒問題，很高興幫助:) – 2012-02-23 04:31:06

我認爲第二種情況也可以通過LI順序的小調整和使用相同的代碼來實現。更優雅地使用nth-child。 http://jsfiddle.net/r5G9p/ – 2012-02-23 06:09:57

當然。取決於是否需要項目首先在列中向下流動，或者是否可以從左向右流動。

如果左到右是確定的，只是指定顯示：塊，浮動：左，寬度爲li元素：

li { 
    display: block; 
    width: 150px; 
    float: left; 
}

如果你正在尋找它放下來流動，再向右，然後有一些技術涉及CSS3列數（僅適用於現代的瀏覽器）現代瀏覽器：

ul { 
    -moz-column-count:2; /* Firefox */ 
    -webkit-column-count:2; /* Safari and Chrome */ 
    column-count:2; 
}

你的第三個選擇是兩個列表並排側使用，

或者，如你所說，divs。

來源

2012-02-23 04:28:29

+1列數 – 2012-02-23 04:31:46

我想你可以，但兩個div與一個列表中的每個我認爲會更好。

來源

2012-02-23 04:28:47 okayGraphics

使用列表很容易。你有沒有嘗試過？

這只是CSS的問題。

刺在黑暗中：

ul { list-style: none; width: 400px; background: #eee; } 
li { display: inline-block; float: left;margin: 10px; width: 158px; background: #eee;border: 1px solid #aaa;height: 100px; } 

<ul> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
</ul>

Demo here

來源

2012-02-23 04:29:50 Scott

這是可能的列表？

回答

相關問題