Javascript 将UL拆分为多个列

很难提取代码并将其发布在这里，因此我将发布一个示例站点，演示我的问题。我一直在思考这个问题，有几种方法可以解决这个问题（HTML修改、CSS+HTML修改、CSS+JS修改），但由于我是网络编码的n00b，我想知道这里的最佳攻击计划是什么

无论如何，问题是：

看看这里：

打开类别导航菜单，您会看到：

这些类别下的所有链接都是

ul

，包含大量

li

。我想打破列表并将列表分成多个列，这样一列中最多只有3个

li

。下面是我想做的一个例子：

这是我想要的全部：

这将导致菜单宽度增加（理论上几乎是原来的两倍），但这对我来说没关系。我可以自己处理这件事

有几种方法可以做到这一点，但我更希望有一些方法只使用CSS修改就可以做到这一点。如果没有，那么可能通过CSS和JavaScript修改？我想保留对实际HTML代码的更改作为最后手段，因为这是我不想修改的原始PHP HTML生成OpenCart代码

请注意，我确实试图自己解决这个问题，但结果证明有点复杂。。所以别以为我没试过。。其次，在一个JSFIDLE中发布这篇文章会很困难，而且它不会完全代表实际问题，这就是为什么我要发布一个指向示例站点的链接

请大家看看。地点：

所以我需要一些答案来解决这个让我困惑的问题

编辑：

---

忘了指出这一点。在我提供的示例中，所有的

ul

s都有3个以上的

li

s，但在我的实际案例中，只有少数

ul

s每个都有3个以上的

li

s，我只想将这些扩展到2列，而不是那些将1、2或3个

li

s列，它应该做你想做的。理论上，只需对您的

ul

应用高度和

列宽即可。实际上，您可能需要在
列宽上使用供应商前缀，为您提供
-webkit列宽
，
-moz列宽
，等等。
您可以将外部divs宽度（在提供的链接中带有“span2”类的部分）设置为350px，并将LIs宽度设置为100px和float:left指令。这是您可以使用的最简单的方法。
看看这个：

var $columns = $("#columns");
var $longlist = $("#longlist");
var columnscount = 3;

//calculate sigle column size
var columnsize = Math.ceil($("p", $longlist).size() / columnscount);

//iterate number of columns, take [columnsize] elements, move them to div#columns and wrap with div.column
for (var i = 0; i < columnscount; i++) {
    $("p:lt(" + columnsize + ")", $longlist).appendTo($columns).wrapAll("<div class='column'/>")
}

var$columns=$（“#columns”）；
var$longlist=$（“#longlist”）；
var columnscount=3；
//计算单列大小
var columnsize=Math.ceil（$（$p'，$longlist.size（）/columnscount）；
//迭代列数，获取[columnsize]元素，将它们移动到div#columns并用div.column换行
对于（变量i=0；i

您需要添加一些条件，以避免拆分长度小于3个元素的列表

这就是它的工作原理：
您在这个问题上花了这么多精力，我本来期待着一个小问题。我很乐意这么做，您可以理解，将此代码连同CSS一起取出本身就是一项主要任务。是的，我本可以制作一些较小的模型示例并发布，但随后人们开始提出仅适用于小模型代码的答案，而不是实际问题的答案。我不希望发生这种情况，这就是为什么我将URL发布到一个显示问题的实际示例站点。后续–为什么在第一个问题之后，你又问了第二个关于基本相同问题的问题？我需要一个更聪明的解决方案。在我提供的示例中，所有
ul
s都有3个以上的
li
s，但在我的实际案例中，只有少数
ul
s有3个以上的
li
s，我只想将这些扩展到2列，而不是1列，每个2或3个
li
s。在这种情况下，您可以使用JS轻松检查每个UL上的LIs数量，并将CSS类添加到使用浮点方法的超过3个LIs的类中。当然，这是一种选择。