Question

我有一个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编辑

请帮帮我。

Answer 1

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

Answer 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>

Answer 3

如果你不喜欢列数答案（我自己喜欢它，但支持是“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的答案，但是如果你需要另一个选项，那么你有

Answer 4

使用CSS网格

HTML：

var params = {
    TableName: "Your_tableName",
    FilterExpression: "BusinessData.FARMERID = :farmeridvalue",
    ExpressionAttributeValues: {
        ":farmeridvalue" :"FAINKABR0001"

    }
};

docClient.scan(params, onScan);

function onScan(err, data) {
    if (err) {
        console.error("Unable to scan the table. Error JSON:", JSON.stringify(err, null, 2));
    } else {
        // print all the movies
        console.log("Scan succeeded.", data);
        data.Items.forEach(function(Block) {
           console.log( "result",
                Block.docType + ": ",
                Block.timestamp, "- rating:",  Block.BusinessData.FARMERID);
        });

        // continue scanning if we have more movies, because
        // scan can retrieve a maximum of 1MB of data
        if (typeof data.LastEvaluatedKey != "undefined") {
            console.log("Scanning for more...");
            params.ExclusiveStartKey = data.LastEvaluatedKey;
            docClient.scan(params, onScan);
        }
    }
}

和CSS

<!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>

演示：https://codepen.io/anthony_718/pen/ExgyKGr

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

4 个答案: