相关疑难解决方法(0)

我有一个项目列表,我想要适合垂直约束的空间:

<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