是否可以使用jQuery / CSS将单列无序列表转换为两列无序列表？

Question

基本上，我想将下面屏幕截图的第一个“类别”列表转换为第二个“类别”列表（两列）：

是否可以使用jQuery或CSS来实现这一目标？

Answer 1

您可以通过向左浮动列表项并在ul和lis上设置宽度来轻松完成此操作

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

Answer 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/

Answer 3

我在这里设置了一个例子。

http://jsfiddle.net/3Jbnf/

基本上，您可以通过设置无序列表的宽度（ul）并将其除以您想要的数量来确定您想要的列数。

我目前设置的示例有两列，ul为250px，每个li项为125px。 250/125 = 2。

编辑：Wes打败了我。

Answer 4

是的。使用 $（el）.each（）将所有项目对象放入数组中。删除此元素，然后使用输出输出2列表：从X到Y，从Y到Z。