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:left应用于N / 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>

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

Answer 2

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

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

Answer 3

为什么不给它max-width？

ul {
  max-width: somevalue; // which would last when the third item ends
}

或者，您可以将类添加为

<ul>
    <li class="one">One</li>
    <li class="one">Two</li>
    <li class="one">Three</li>
    <li class="two">Four</li>
    <li class="two">Five</li>
    <li class="two">Six</li>
</ul>

现在CSS为：

.one {
  display: inline;
}

.two {
  display: inline;
}

填充的最后一件事是

ul li {
  padding: somevalue;
}

切片：

ul {
  max-width: 200px; // to break the list
}

祝你好运，你可以先查看清单的宽度！然后使用JS将其分成两个相等的部分，然后应用它。

如果你想获得CSS calucator，请使用：

width: calc(var1 + var2); // calc will do the math..

以下是这种情况的小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/xN87Q/

Answer 4

你可以使用

li:nth-child(even) 

li:nth-child(odd)

http://jsfiddle.net/nCmZT/

Answer 5

来源：Creating a two column Unordered List

小提琴：Demo provided in the link

<强> HTML

<ul class="two-col-special">
    <li>First Category</li>
    <li>Second Category</li>
    <li>Third Category</li>
    <li>Fourth Category</li>
    <li>Fifth Category</li>
</ul>

<强> CSS

.two-col-special {
    border: 1px dotted blue;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.two-col-special li {
    display: inline-block;
    width: 45%;
    margin: 0;
    padding: 0;
    vertical-align: top; /* In case multi-word categories form two lines */
}
.two-col-special li:before {
    content: '+';
    padding: 5px;
    margin-right: 5px; /* you can tweak the gap */
    color: orange;
    background-color: white; /* in case you want a color... */
    display: inline-block;
}

Answer 6

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

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

Answer 7

下面是使用display: flex和flex-direction: row将列的顺序从行改为行的示例：

#list-1 {
  border: 3px solid red;
  columns: 2;
  column-gap: 5px;
  width: 200px;
}

#list-2 {
  border: 3px solid blue;
  columns: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto; /* can change this */
  width: 200px;
}

#list-2 li {
  width: 100px;
  height: auto;
}

<ul id="list-1">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>

<ul id="list-2">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>

Answer 8

我认为最简单和正确的方法{OL tag尤其}是：

<ul>
  <div class="row">
    <div class="col-6">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </div>
    <div class="col-6">
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </div>
   </div>
</ul>

如何在两行中显示列表？

8 个答案: