有没有办法将列表分成列？

Question

我的网页有一个"瘦"列表:例如,每个长度为100个单词的列表.为了减少滚动,我想在页面上的两列甚至四列中显示此列表.我应该如何使用CSS？

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

我更喜欢灵活的解决方案,以便如果列表增加到200个项目,我不必进行大量手动调整以适应新列表.

Answer 1

CSS解决方案是:http://www.w3.org/TR/css3-multicol/

浏览器支持正是您所期望的.

除了Internet Explorer 9或更早版本之外,它"无处不在":http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

请参阅: http ://jsfiddle.net/pdExf/

如果需要IE支持,则必须使用JavaScript,例如:

http://welcome.totheinter.net/columnizer-jquery-plugin/

另一种解决方案是仅float: left针对IE回退到正常状态.订单会出错,但至少它看起来很相似:

见: http ://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

如果您已经在使用它,可以将该回退应用于Modernizr.

Answer 2

如果您正在寻找在IE中工作的解决方案,您可以将列表元素浮动到左侧.但是,这将产生一个蛇形列表,如下所示:

item 1 | item 2 | item 3
item 4 | item 5

而不是整齐的列,如:

item 1 | item 4
item 2 | 
item 3 | 

这样做的代码是:

ul li {
  width:10em;
  float:left;
}

您可以在lis中添加边框底部,以使项目从左到右的流动更加明显.

Answer 3

2021 - 保持简单，使用 CSS Grid

很多这些答案已经过时了，现在是 2021 年，我们不应该为仍在使用 IE9 的人提供支持。使用CSS grid更简单。

代码非常简单，您可以使用grid-template-columns. 看到这个，然后用这个小提琴来满足你的需要。

.grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<ul class="grid-list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

Answer 4

如果需要预设数量的列,可以使用列数和列间距,如上所述.

但是,如果您希望单个列的高度有限,如果需要可以分成更多列,可以通过将显示更改为flex来实现.

这不适用于IE9和其他一些旧浏览器.您可以查看我可以使用的支持

<style>
  ul {
    display: -ms-flexbox;           /* IE 10 */
    display: -webkit-flex;          /* Safari 6.1+. iOS 7.1+ */
    display: flex;
    -webkit-flex-flow: wrap column; /* Safari 6.1+ */
    flex-flow: wrap column;
    max-height: 150px;              /* Limit height to whatever you need */
  }
</style>

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>