logo标签列表

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

htmlcssfrontend
28

我有一个包含列表的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进行编辑的。

请帮帮我。

请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/columns 以获取有关 monkeyinsight 回答中使用的属性的更多信息。 - Ry-
4个回答
89
ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}
1
在 WebKit 下，这将会移除列表符号。 - Ry-
你好..我尝试了你的答案，但在Mozilla和Chrome上不起作用。 - Redshot
@minitech li:before {content: '● ';font-size: 10px;} :) - monkeyinsight
如果使用： list-style-position: inside;您将会看到项目符号。 - Jeff Mattson
5
我是唯一一个像“哇，这么简单？”的人吗？我本来要计算列数，做一些复杂的HTML/CSS工作等。 - Victor
在Safari浏览器中无法正常工作 - 它可以使列对齐，但通常会留下溢出间隙。 - Greg Wozniak
22

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>

12

如果您不喜欢分列答案（我自己很喜欢，但支持情况“靠谱性”确实有些问题，尤其是在IE浏览器中），您可以简单地执行以下操作：

ul li{width:33.333333%; float:left;}

甚至更多

ul{display:block;}
ul li{display:inline-block;}
但是这样你将会有三个列，尽管顺序不同：而不是
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;} 的方法是最好的选择。 - Leonardo
在“width:33,333333%”中，逗号的作用是什么？数字/百分比中的逗号是否可以与句点互换？ - Employee
这是一个自动纠正的打字错误，在我的语言和地区（西班牙语，阿根廷），逗号代替句点。 - Devin
6

使用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>

并且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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接