这是使用jquery的一种简单方法。我知道有人提到需要CSS方式,但是如果有人想参考这个问题,这仅供以后参考。
获取LI项的数量,然后将其除以行数,然后将该值设置为column-count属性。
$(document).ready(function() {
var numitems = $("#myList li").length;
$("ul#myList").css("column-count",Math.round(numitems/2));
});
ul {
width: 900px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}
<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的固定宽度。