html表格两行显示,css – 如何在两行中显示列表？

这是一个使用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

• One
• Two
• Three
• Four
• Five
• Six
• Seven
• Eight
• Nine

编辑：

相同的实现使用简单的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的固定宽度.