Red*_*hot 12 html css frontend
我里面有一个ul列表.是否可以将列表分为3列.
我的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>
问题:我无法直接编辑页面并将列表分成3 ul.我必须通过CSS编辑它.
输出:最终输出应该有3列.并通过CSS编辑
请帮我.
mon*_*ght 42
ul {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
CSS3 flexbox也可以这样做:
ul {
flex-direction: column;
flex-wrap: wrap;
display: flex;
height: 100vh;
}
ul li {
flex: 1 0 25%;
}
上面的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>如果您想要以下布局:
+-----------------------+
| 1 | 2 | 3 | 4 |
+-----------------------+
+-----------------------+
| 5 | 6 | 7 | 8 |
+-----------------------+
+-----------------------+
| 9 | 10 | 11 | 12 |
+-----------------------+
你可以使用以下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>如果你不喜欢列数答案(我自己喜欢它,但支持是"iffy",特别是在IE中),你可以简单地这样做:
ul li{width:33.333333%; float:left;}
甚至
ul{display:block;}
ul li{display:inline-block;}
但是这样你将有3列,虽然顺序不同:而不是
1 4 7
2 5 8
3 6 9
你会的
1 2 3
4 5 6
7 8 9
所以考虑一下利弊.
就个人而言,我会使用monkeyinsight的答案,但如果你需要另一种选择,那么你就有了
小智 6
使用 CSS 网格
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>
和CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
演示： https: //codepen.io/anthony_718/pen/ExgyKGr
| 归档时间： |
|
| 查看次数： |
28024 次 |
| 最近记录： |