javascript - 将 UL 分成多列

Question

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

无论如何，问题是：

看看这里：http: //321cart.com/sellya/

打开类别导航菜单，你会得到这个：

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

这是我想要的总体情况：

这将导致菜单宽度增加（理论上实际上是两倍），但这对我来说没问题。我可以自己处理这件事。

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

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

请大家看看。网站：http: //321cart.com/sellya/

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

编辑：

忘了指出这一点。在我提供的示例中，所有uls 每个都超过 3li秒，但在我的实际情况中，只有少数uls 每个超过 3li秒，我只想将这些扩展到 2 列，而不是 1，每次2 或 3li秒。

Answer 1

CSS3 引入了列，它应该做你想要的。理论上，只需将高度和column-width应用于您的ul. 在实践中，您可能需要在 上使用供应商前缀column-width，给您-webkit-column-width,-moz-column-width等。试试看。

Answer 2

看看这个：

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/

Answer 3

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