如何将单个 ul 中的列表分为 3 列
Posted
技术标签:
【中文标题】如何将单个 ul 中的列表分为 3 列【英文标题】：How to divide list in a single ul into 3 columns 【发布时间】：2014-11-06 03:32:30 【问题描述】：我有一个 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 编辑
请帮帮我。
【问题讨论】：
请参阅 developer.mozilla.org/en-US/docs/Web/CSS/columns，了解有关 monkeyinsight 答案中使用的属性的更多信息。 【参考方案1】：ul
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
【讨论】：
至少在 WebKit 下，这将删除列表中的项目符号。 你好.. 我试过你的答案，但它不适用于 mozilla 和 chrome。 @minitechli:before content: '● ';font-size: 10px; :)
如果你使用：list-style-position: inside; 你会看到子弹。
只有我一个人会说“哇，就这么简单吗？”。我打算计算列数，做一些困难的 html/css 等【参考方案2】：
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>【讨论】：
【参考方案3】：如果您不喜欢按列计数的答案（我自己也喜欢，但确实支持“不确定”，特别是在 IE 中），您可以简单地这样做：
ul liwidth:33.333333%; float:left;
甚至
uldisplay:block;
ul lidisplay:inline-block;
但是这样你将有 3 列，虽然顺序不同：而不是
1 4 7
2 5 8
3 6 9
你会有
1 2 3
4 5 6
7 8 9
所以要考虑利弊。
就个人而言，我会使用 monkeyinsight 的答案，但如果您需要其他选择，这里有
【讨论】：
谢谢。方法 uldisplay:block; ul lidisplay:inline-block; 在我看来是最好的选择。width:33,333333% 中的逗号有什么作用？逗号可以与数字/百分比中的句点互换吗？
这是一个自动更正的错字，在我的语言和区域设置（西班牙语、阿根廷）中，逗号替换句点【参考方案4】：
使用 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
【讨论】：
以上是关于如何将单个 ul 中的列表分为 3 列的主要内容，如果未能解决你的问题，请参考以下文章