有没有办法把一个列表分成几列？

小开

最佳答案

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

浏览器支持正是你所期望的。

它“无处不在”，除了 Internet Explorer 9

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

参见: < a href = “ http://jsfiddle.net/pdExf/”> http://jsfiddle.net/pdexf/

如果需要 IE 支持，你必须使用 JavaScript，例如:

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

另一个解决方案是回退到正常的 float: left为 只有 IE。顺序可能是错误的，但至少看起来是相似的:

参见: < a href = “ http://jsfiddle.net/NJ4hw/”> http://jsfiddle.net/nj4hw/

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

如果您已经在使用现代化，那么可以应用它。

小开

如果您正在寻找一个解决方案，在 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中添加一个边框底部，以使项目从左到右的流动更加明显。

小开

我发现(目前) Chrome (Version 52.0.2743.116 m)在 css column-count中有很多关于溢出项和项内绝对定位元素的怪癖和问题，尤其是一些尺寸转换。.

它完全是一团糟，无法修复，所以我试图通过简单的 javascript 来解决这个问题，并创建了一个类似的库—— https://github.com/yairEO/listBreaker

演示页面

小开

如果需要预设列数，可以使用列计数和列间隙，如上所述。

但是，如果您想要一个高度有限的单列，并且需要时可以分成更多列，那么可以通过将 display 更改为 flex 来实现。

这在 IE9和其他一些老式浏览器上无法工作。您可以检查对我能用的支持

<style>
ul {
display: flex;
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>

小开

这个答案不一定是规模，但是只需要随着列表的增长做一些小的调整。从语义上来说，它可能看起来有点违反直觉，因为它是二列表，但除此之外，它将看起来像你想在任何浏览器曾经做过的方式。

ul {
float: left;
}


ul > li {
width: 6em;
}

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

小开

如果您能够支持它，CSS 网格可能是最干净的方式，使一维列表成为两列布局响应内部。

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

小开

移动优先的方法是使用 CSS 列为较小的屏幕创建体验。那么使用媒体查询在每个布局的已定义断点处增加列数。

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>

小开

我是这么做的

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>

小开

这是2022-保持简单，使用 CSS `grid`或 `column-count`

很多这样的答案都已经过时了，现在是2022年，我们不应该让那些仍在使用 IE9的人使用。使用 CSS 网格或 column-count要简单得多。

代码非常简单，您可以使用 grid-template-columns或 column-count轻松地调整有多少列。

grid解决方案:

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

column-count解决方案，维持秩序:

.column-list {
column-count: 4;
}

<ul class="column-list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
</ul>

小开

li{
width:50%
}


ul{
display:flex;
flex-wrap:wrap
}

<ul>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
<li>List Item4</li>
<li>List Item5</li>
<li>List Item6</li>
<li>List Item7</li>
<li>List Item8</li>
<li>List Item9</li>
<li>List Item10</li>
</ul>

这是最简单的方法之一，您可以通过改变 li 的宽度来指定所需的列数。并使 ul 显示灵活，只是包装元素。

有没有办法把一个列表分成几列？

演示页面

这是2022-保持简单，使用 CSS grid或 column-count

这是2022-保持简单，使用 CSS `grid`或 `column-count`