如何在两行中显示列表？

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:leftN/2元素.我不知道该怎么做.

我也知道我可以通过将其分成多个ul,每个都有两个li,以及float:left它们来实现,但我想避免将HTML弄为完全呈现的东西.

有人有解决这个问题的方法吗？

编辑:我想我在解释我的要求时并不清楚.我希望将列表分类到列中,而不知道我将要拥有多少项,因此我将始终有两行.

所以例如有7个项目,我希望:

One    Two     Three   Four
Five   Six     Seven

并有3个项目:

One    Two
Three  

Answer 1

这是使用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的固定宽度.

Answer 2

你可以将你的li设置为33%宽度并相互浮动,一旦没有足够的空间,他们将被推下3行等宽的行.

ul li{
  width: 33%;
  float: left;
}

Answer 3

我知道这个问题已经有 7 年历史了，但是如果今天有人遇到类似的问题，那么这里有一个使用 CSS 网格布局的解决方案（https://www.w3.org/TR/css-grid-1/）

ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}