如何将单个 ul 中的列表分为 3 列答案

【问题标题】：How to divide list in a single ul into 3 columns如何将单个 ul 中的列表分为 3 列
【发布时间】：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 答案中使用的属性的更多信息。

标签： html css frontend

【解决方案1】：

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

【讨论】：

至少在 WebKit 下，这将删除列表中的项目符号。
你好.. 我试过你的答案，但它不适用于 mozilla 和 chrome。
@minitech li: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 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 的答案，但如果您需要其他选择，这里有

【讨论】：

谢谢。方法 ul{display:block;} ul li{display: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

【讨论】：