如何在两行中显示列表？

小编典典

如何在两行中显示列表？

css

我有一个要在垂直约束的空间中放置的物品的清单：

<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

阅读 441

2020-05-16

共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的固定宽度。

2020-05-16