Html 如何将单个 ul 中的列表分成 3 列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25800067/
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 to divide list in a single ul into 3 columns
提问by Redshot
I have a ul has list inside it. Is it possible to divide the list into 3 columns.
我有一个 ul 里面有列表。是否可以将列表分为 3 列。
The structure of my html is like this:
我的html结构是这样的：
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
Problem:I cannot directly edit the page and divide the list in to 3 ul. I must edit it via CSS.
问题：我无法直接编辑页面并将列表分成 3 ul。我必须通过 CSS 编辑它。
Output:The final output should have 3 columns. And edited via CSS
输出：最终输出应该有 3 列。并通过 CSS 编辑
Please help me.
请帮我。
回答by monkeyinsight
ul {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
回答by Mohammad Usman
CSS3 flexboxcan also do this as well:
CSS3flexbox也可以这样做：
ul {
flex-direction: column;
flex-wrap: wrap;
display: flex;
height: 100vh;
}
ul li {
flex: 1 0 25%;
}
Above css will create the following layout:
上面的 css 将创建以下布局：
+--------------------+
| 01 | 05 | 09 |
+--------------------+
+--------------------+
| 02 | 06 | 10 |
+--------------------+
+--------------------+
| 03 | 07 | 11 |
+--------------------+
+--------------------+
| 04 | 08 | 12 |
+--------------------+
* {box-sizing: border-box;}
body {
margin: 0;
}
.list {
flex-direction: column;
list-style: none;
flex-wrap: wrap;
height: 100vh;
display: flex;
padding: 0;
margin: 0;
}
.list li {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
flex: 1 0 25%;
padding: 10px;
color: #fff;
}
.col1 {
background: blue;
}
.col2 {
background: orange;
}
.col3 {
background: green;
}<ul class="list">
<li class="col1">Test 1</li>
<li class="col1">Test 2</li>
<li class="col1">Test 3</li>
<li class="col1">Test 4</li>
<li class="col2">Test 5</li>
<li class="col2">Test 6</li>
<li class="col2">Test 7</li>
<li class="col2">Test 8</li>
<li class="col3">Test 9</li>
<li class="col3">Test 10</li>
<li class="col3">Test 11</li>
<li class="col3">Test 12</li>
</ul>In case you wants the following layout:
如果您想要以下布局：
+-----------------------+
| 1 | 2 | 3 | 4 |
+-----------------------+
+-----------------------+
| 5 | 6 | 7 | 8 |
+-----------------------+
+-----------------------+
| 9 | 10 | 11 | 12 |
+-----------------------+
you can use the following css:
您可以使用以下 css：
ul {
flex-wrap: wrap;
display: flex;
}
ul li {
flex: 1 0 25%;
}
* {box-sizing: border-box;}
body {
margin: 0;
}
.list {
list-style: none;
flex-wrap: wrap;
display: flex;
padding: 0;
margin: 0;
}
.list li {
border-bottom: 1px solid #fff;
flex: 1 0 25%;
padding: 10px;
color: #fff;
}
.list li:nth-child(4n + 1) {
background: blue;
}
.list li:nth-child(4n + 2) {
background: orange;
}
.list li:nth-child(4n + 3) {
background: green;
}
.list li:nth-child(4n + 4) {
background: purple;
}<ul class="list">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
<li>Test 7</li>
<li>Test 8</li>
<li>Test 9</li>
<li>Test 10</li>
<li>Test 11</li>
<li>Test 12</li>
</ul>回答by Devin
if you don't like the column-count answer (I like it myself but it's true that support is "iffy", specially in IE), you can simply do this:
如果您不喜欢列数答案（我自己喜欢它，但确实支持“不确定”，特别是在 IE 中），您可以简单地执行以下操作：
ul li{width:33.333333%; float:left;}
or even
甚至
ul{display:block;}
ul li{display:inline-block;}
But this way you will have 3 columns although in different order: instead of
但是这样您将有 3 列，尽管顺序不同：而不是
1 4 7
2 5 8
3 6 9
you'll have
你会有
1 2 3
4 5 6
7 8 9
so consider the pros and cons.
所以要考虑利弊。
Personally, I'd use monkeyinsight's answer, but if you need another option, here you have
就个人而言，我会使用monkeyinsight 的答案，但如果您需要其他选择，这里有
