css – 如何在兩行中顯示列表？

我有一個專案列表,我想要適應垂直限制的空間：

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>

由於我不希望列表有一個特定的高度,但是我可以自由地橫向展開,我想將列表分成幾列,如下所示：

OneTwoThree
FourFiveSix

或者,(在我的情況下,順序不重要)

OneThreeFive
TwoFourSix

css屬性列計數允許將列表分成列,但它只接受固定數量的列.我不知道我要擁有的專案數量(可以從1到40多個),所以如果我將列數設定為3,那麼超過6個專案的列表將會太高,而如果只有4個專案,那麼只有第一列將有兩個專案,它將看起來不均勻.

所以,理想情況下,我需要一個row-count屬性,但它不存在.我想我可以在Javascript中做到這一點,但我正在尋找一個僅用於CSS的解決方案.

我試過一些東西：float：每一個li都放在一列.要將其分成兩行,我不需要使用float：left到N / 2元素.我不知道該怎麼做

我也知道,我可以通過將它分成多個ul,每個都有兩個li,並且float：留下它們,但是我想避免把HTML完全表現出來.

有人有解決這個問題的辦法嗎？

編輯：我想我沒有明確的解釋我的要求.我希望列表被排序到列,而不知道我將要有多少專案,所以我將總是有兩行.

所以例如有7個專案,我想要有：

OneTwoThreeFour
FiveSixSeven

並有3個專案：

OneTwo
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>

ofollow,noindex" target="_blank">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的固定寬度.