如何将单个ul中的列表分成3列

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.

请帮帮我。

3 个解决方案

#1

ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

#2

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:

如果你不喜欢列数答案（我自己喜欢它，但支持是“iffy”，特别是在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的答案，但如果你需要另一种选择，那么你就可以了

#3

CSS3 flexbox can also do this as well:

CSS3 flexbox也可以这样做：

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>

#1

ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

#2