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

所以,理想情况下,我需要一个row-count属性,但它不存在.我想我可以在Javascript中做到这一点,但我正在寻找一个仅用于CSS的解决方案.

我试过一些东西：float：每一个li都放在一列.要将其分成两行,我不需要使用float：left到N / 2元素.我不知道该怎么做

我也知道,我可以通过将它分成多个ul,每个都有两个li,并且float：留下它们,但是我想避免把HTML完全表现出来.

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

编辑：我想我没有明确的解释我的要求.我希望列表被排序到列,而不知道我将要有多少项目,所以我将总是有两行.

所以例如有7个项目,我想要有：

One    Two     Three   Four
Five   Six     Seven

并有3个项目：

One    Two
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>

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

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

解决方法

猜你在找的CSS相关文章