How to divide list in a single ul into 3 columns
Question
I have a ul has list inside it. Is it possible to divide the list into 3 columns.
The structure of my html is like this:
<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.
Output: The final output should have 3 columns. And edited via CSS
Please help me.
4 answers
solution1
64 ACCPTED 2014-09-12 03:04:25
ul {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
solution2
17 2016-11-07 13:28:58
CSS3 flexbox can also do this as well:
ul {
flex-direction: column;
flex-wrap: wrap;
display: flex;
height: 100vh;
}
ul li {
flex: 1 0 25%;
}
Above css will create the following layout:
+--------------------+
| 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:
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>
solution3
11 2014-09-12 03:22:18
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:
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
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
solution4
1 2020-12-07 15:15:06
Using CSS Grid
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<div class="cont">
<ul class="list">
<li class="list-item">*</li>
<li class="list-item">*</li>
<li class="list-item">*</li>
<li class="list-item">*</li>
<li class="list-item">*</li>
<li class="list-item">*</li>
<li class="list-item">*</li>
<li class="list-item">*</li>
<li class="list-item">*</li>
</ul>
</div>
</body>
</html>
And The CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.