Q

是否有可能使用jQuery/CSS将一列无序列表变成两列无序列表？

jquery
css

2011-08-24 64 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

相关问题