如何在两行中显示列表？

这是使用jquery的一种简单方法。我知道有人提到需要CSS方式，但是如果有人想参考这个问题，这仅供以后参考。

获取LI项的数量，然后将其除以行数，然后将该值设置为column-count属性。

jQuery

$(document).ready(function() {var numitems =  $("#myList li").length;$("ul#myList").css("column-count",Math.round(numitems/2));});

CSS

ul {  width: 900px;}li {width: 75px;height: 75px;margin-top: 10px;margin-right: 10px;display: inline-block;}

HTML

<ul id="myList"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li>    </ul>

在这里摆弄

编辑：

使用简单的javascript的相同实现。

var ul = document.getElementById("myList");var li = ul.getElementsByTagName("li");var numItems = li.length;var css = document.createElement("style");css.type = "text/css";css.innerHTML = "ul { column-count: " + Math.round(numItems/2) + "; }";document.body.appendChild(css);

您需要设置UL的宽度，因为即使在设置了列数之后，行数也将取决于宽度。您也可以将其设置为100％，但是行数将根据窗口大小而改变。要将行数限制为2，可能需要UL的固定宽度。