我如何訂購這樣的HTML列表與CSS或JavaScript？

我想訂購這個訂單中的物品清單（附圖）。每列應該有5行，然後接下來的5獲得另一列，並繼續...我如何訂購這樣的HTML列表與CSS或JavaScript？

這個列表是動態生成的，通過sql查詢在li標籤上有一個循環。

，所以我只需要找到一種方法，責令其在JavaScript或CSS這樣...

Example

來源

2012-07-29 daren1212

你想要它按這樣的數字排序？還是這樣呢？ – Shawn31313 2012-07-29 18:26:25

它沒有這樣排序，這是我想要做的... – daren1212 2012-07-29 18:27:48

好吧，讓我看看我能做些什麼。 – Shawn31313 2012-07-29 18:30:22

你可以在這裏找到一個很好的例子。 http://www.alistapart.com/d/multicolumnlists/example1.html enter link description here

您還可以創建3個以1,6和11開頭的列表。在這種情況下，您根本不需要css或js。像這樣：

<ol start="1">....</ol> 
<ol start="6">....</ol> 
<ol start="11">....</ol>

來源

2012-07-29 19:04:20

看看多列環境。 specification目前是一個候選推薦，所以它不應該改變那麼多。請記住，這在IE prior to version 10中沒有實現，但是有一個JavaScript fallback應該可以工作，即使在列表中。

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

ol{ 
    -moz-column-count:2; 
    -webkit-column-count:2; 
    column-count: 2; 
}

請注意，您必須從某個地方指定的實際數額列。但是，如果您的SQL查詢的每個記錄都等於一個項目，則可以使用類似count($result)/5的內容。

Demo

來源

2012-07-29 19:10:18 Zeta

+1您應該添加非供應商前綴規則（'列計數'）最後雖然 – steveax 2012-07-29 19:14:10

@ steveax：我已經添加這相當instantaneous在我發佈我的原來的答案，但我忘了將它添加到演示。謝謝你的提示。 – Zeta 2012-07-29 19:15:53

我看不到數字 – codingbiz 2012-07-29 19:19:58

我如何訂購這樣的HTML列表與CSS或JavaScript？

回答

相關問題