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

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/

另一种解决方案是仅针对 IE 回退到正常float: left。订单是错误的，但至少它看起来很相似：

请参阅： 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;
}

您可以在li添加边框底部，以使项目从左向右流动更明显。

Answer 3

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

但是，如果您想要一个高度有限的单列，如果需要可以分成更多的列，这可以通过将显示更改为flex来实现。

这不适用于IE9和其他一些旧浏览器。您可以查看Can I use

上的支持

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

2020-保持简单，使用CSS网格

很多这些答案已经过时了，那就是2020年，我们不应该让仍在使用IE9的人们得到支持。仅使用CSS grid更为简单。

代码非常简单，您可以使用grid-template-columns轻松地调整有多少列。 See this，然后根据需要使用this fiddle。

.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 5

这个答案并不一定 scale ，但随着列表的增长，只需​​要进行微小的调整。在语义上它可能看起来有点反直觉，因为它是两个列表，但除此之外，它会在任何浏览器中看起来像你想要的那样。

＆＃13;

＆＃13;

ul {
  float: left;
}

ul > li {
  width: 6em;
}

＆＃13;

<!-- Column 1 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<!-- Column 2 -->
<ul>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 6

我发现（目前）Chrome（Version 52.0.2743.116 m）对于溢出项目和项目中的绝对定位元素有很多关于css column-count的怪癖和问题，特别是对于某些维度转换。

它一团糟，无法修复，所以我尝试通过简单的javascript解决这个问题，并创建了一个可以实现这一目标的库 - https://github.com/yairEO/listBreaker

Demo page

Answer 7

如果你能支持它，CSS Grid可能是将一维列表制作成具有响应性内部的两列布局的最简洁方法。

ul {
  max-width: 400px;
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 0;
  border: 1px solid blue;
}

li {
  list-style: inside;
  border: 1px dashed red;
  padding: 10px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
<ul>

这两个关键线将为您提供2列布局

display: grid;
grid-template-columns: 50% 50%;

Answer 8

移动优先方式是使用CSS Columns为较小的屏幕创建体验，然后使用Media Queries增加{Layout}定义的每个断点处的列数

ul {
  column-count: 2;
  column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
  ul {
    column-count: 3;
    column-gap: 5rem;
  }
}

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

Answer 9

这就是我所做的

ul {
      display: block;
      width: 100%;
}

ul li{
    display: block;
    min-width: calc(30% - 10px);
    float: left;
}

ul li:nth-child(2n + 1){
    clear: left;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>0</li>
</ul>