将UL分成多个列

Question

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

无论如何，问题是：

请点击此处： http://321cart.com/sellya/

打开类别导航菜单，您就可以了：

类别下的所有这些链接都是ul，其中包含大量li。我想打破列表并展开多列的列表，以便一列中最多只有3 li 。这是我想要做的一个例子：

这是我想要的整体事情：

这将导致菜单宽度增加（理论上几乎翻倍），但这对我来说没问题。我可以自己解决这个问题。

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

请注意，我确实尝试自己解决这个问题，但事实证明这有点复杂。所以不要以为我没有尝试..其次，在JSFiddle发布这个问题会很困难to，并且它不会真正完全代表实际问题，这就是为什么我要发布一个示例网站的链接。

请看看伙计们。网站：http://321cart.com/sellya/

所以我需要一些解决这个令我感到困惑的问题的答案。

修改

忘了指出这一点。在我提供的示例中，所有ul的每个li都超过3 ul，但在我的实际情况中，只有少数li的{​​{1}}超过3 li s每个，我仅想要将这些列扩展为2列，而不是每列{1}}。{/ p>

Answer 1

CSS3引入了列，它应该做你想要的。理论上，只需在column-width处应用高度和ul即可。在实践中，您可能需要在column-width上使用供应商前缀，为您提供-webkit-column-width，-moz-column-width等。Try it out.

Answer 2

您可以将外部divs宽度（在提供的链接中具有“span2”类的宽度）设置为类似于350px并将LIs width设置为100px和float：left指令。这是您可以使用的最简单的方法。

Answer 3

看看这个：

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'/>")
}

您需要添加一些条件以避免将列表拆分为短于3个元素。

这就是它的工作原理：http://jsfiddle.net/hGWjd/