css - 如何在两行中显示列表？

Question

我有一个元素列表，我想将它们放入垂直受限的空间中:

<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 属性 column-count 允许将列表分成多列，但它只接受固定数量的列。我不知道我要拥有的元素数量(它可以从 1 到超过 40)，所以如果我将列数设置为 3，任何超过 6 元素的列表都会太高，并且如果只有4个元素，那么只有第一列会有两个元素，看起来不均匀。

因此，理想情况下我需要一个 row-count 属性，但它不存在。我想我也可以用 Javascript 做到这一点，但我正在寻找一个纯 CSS 解决方案。

我尝试了一些东西:float:left 在每个 li 上将列表放在一行中。要将其分成两行，我需要不将 float:left 应用于 N/2 元素。我不知道该怎么做。

我也知道我可以通过将它分成多个 ul 来做到这一点，每个都有两个 li 和 float:left 它们，但我想避免将 HTML 弄乱以用于完全展示的内容。

有人能解决这个问题吗？

编辑:我想我没有清楚地解释我的要求。我希望在不知道我将拥有多少项的情况下将列表排序到列中，这样我将始终有两行。

所以例如有 7 个元素，我想要:

One    Two     Three   Four
Five   Six     Seven

还有 3 个元素:

One    Two
Three  

Answer 1

这里有一个使用 jquery 的简单方法。我知道有人提到需要 CSS 方式，但这仅供将来有人想引用此问题时引用。

获取 LI 项的数量并将其除以行数并将该值设置为列计数属性。

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>

Fiddle here

编辑:

使用简单 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 的固定宽度。