Q

是否有可能使用jQuery/CSS將一列無序列表變成兩列無序列表？

jquery
css

2011-08-24 56 views 2 likes

2

基本上，我想將屏幕截圖的第一個「類別」列表下方弄成第二個「類別」列表（兩列）：是否有可能使用jQuery/CSS將一列無序列表變成兩列無序列表？

enter image description here

是否有可能與jQuery或archieve此CSS？

2011-08-24 alexchenco

A

回答

3

您可以通過浮動留下您的列表項，並設置寬度上UL和LIS都做到這一點很容易

演示：http://jsfiddle.net/wesbos/dcqdr/

2011-08-24 06:46:07 wesbos

+0

我不知道如果我太笨，但那是簡單，正是我需要的，謝謝。 – alexchenco

+1

有時最好的解決方案是最簡單的:)確保檢查爲正確的答案。 – wesbos

0

嗯，是。將所有項目對象放入數組中，使用$（el）.each（）。刪除這個元素，然後用爲輸出2個列表：從X到Y，從Y到Z.

2011-08-24 06:46:30

+0

更好的韋斯回答。 –

1

我在這裏設置了一個例子。

http://jsfiddle.net/3Jbnf/

基本上，你可以決定你想要多少列通過設置未有序列表（UL）的寬度和劃分，通過你要多少。

我設置的示例目前有兩列，分別爲012px爲250px，每個li項目爲125px。 250/125 = 2.

編輯：Wes擊敗了我。

2011-08-24 06:59:51

2

使用CSS3，您可以非常輕鬆地創建多列。

ul{ 
    -moz-column-count: 2; -moz-column-gap: 10px; 
    -webkit-column-count: 2; -webkit-column-gap: 10px; 
    column-count: 2; column-gap: 10px; 
    }

這裏有一個例子：http://jsfiddle.net/ESPUU/

2011-08-24 08:12:52

相關問題