我有一个项目列表,我想要适应垂直限制的空间：
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
由于我不希望列表有一个特定的高度,但是我可以自由地横向展开,我想将列表分成几列,如下所示：
One Two Three Four Five Six
或者,(在我的情况下,顺序不重要)
One Three Five Two Four Six
css属性列计数允许将列表分成列,但它只接受固定数量的列.我不知道我要拥有的项目数量(可以从1到40多个),所以如果我将列数设置为3,那么超过6个项目的列表将会太高,而如果只有4个项目,那么只有第一列将有两个项目,它将看起来不均匀.
所以,理想情况下,我需要一个row-count属性,但它不存在.我想我可以在Javascript中做到这一点,但我正在寻找一个仅用于CSS的解决方案.
我试过一些东西：float：每一个li都放在一列.要将其分成两行,我不需要使用float：left到N / 2元素.我不知道该怎么做
我也知道,我可以通过将它分成多个ul,每个都有两个li,并且float：留下它们,但是我想避免把HTML完全表现出来.
有人有解决这个问题的办法吗？
编辑：我想我没有明确的解释我的要求.我希望列表被排序到列,而不知道我将要有多少项目,所以我将总是有两行.
所以例如有7个项目,我想要有：
One Two Three Four Five Six Seven
并有3个项目：
One Two Three
解决方法
这是一个使用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的固定宽度.
