CSS 如何从单个无序列表创建多列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42613350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I create multi columns from a single unordered list?
提问by Sempervivum
I'd like to create a multi column list like this: https://jsfiddle.net/37dfwf4u/
我想创建一个这样的多列列表：https: //jsfiddle.net/37dfwf4u/
No problem when using a different list for each column:
为每列使用不同的列表时没问题：
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ul>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
ul {
display:inline-block;
}
However, can this be done by a continuous list and pure CSS so that the CSS arranges the columns automatically? E.g. by use of flex layout which I'm not yet familiar with?
但是，这可以通过连续列表和纯 CSS 来完成，以便 CSS 自动排列列吗？例如，使用我还不熟悉的 flex 布局？
回答by Johannes
Yes, you can create a multi column list as described if you make the ula flex container, change the flex-directionto column, allow it to wrap by applying flex-wrap: wrapand additionally force it to wrap by limiting its height:
是的，您可以创建一个多列列表，如果您制作ul一个 flex 容器，将 更改flex-direction为column，允许它通过应用包装flex-wrap: wrap并另外通过限制其来强制包装height：
ul {
height: 100px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>Here's another possibility, added half a year later after the comment by @Andrew Koper:
这是另一种可能性，在@Andrew Koper 发表评论后半年后添加：
You can also use the colummn-countparameter, which doesn't require a fixed height (and also not flex), but defines a fixednumber of columns. So in the example below, even just two list items would be broken into two columns of one list item each:
您也可以使用该colummn-count参数，它不需要固定高度（也不需要 flex），但定义了固定数量的列。所以在下面的例子中，即使只有两个列表项也会被分成两列，每列一个列表项：
ul {
column-count: 2;
}<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>回答by Greg
Consider using CSS3 Multi-column Layout for that:
考虑使用 CSS3 多列布局：
You can do that using just one list and define the number of columns with CSS. If you check CSS3 Multi-column layout browser support hereyou can see partial support by most of the browsers, because they do not support break-before, break-after and break-inside properties. But they do support the properties you will need to create a multi column list with a prefix.
您可以只使用一个列表并使用 CSS 定义列数。如果您在此处检查 CSS3 多列布局浏览器支持，您可以看到大多数浏览器部分支持，因为它们不支持 break-before、break-after 和 break-inside 属性。但它们确实支持创建带有前缀的多列列表所需的属性。
.container {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
ul {
margin: 0;
}<div class="container">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</div>