将列表项显示为列

Question

我需要按特定顺序在列中显示列表项。

例如，我有这样的代码：

<div style="height:400px;">
<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
</ul>
</div>

我想像这样在 三 列中显示它：

1   5
2   6
3   
4

或者什么时候会有更多的元素：

1  5  9
2  6  10
3  7  11
4  8

column-count + column-width 将不起作用，因为它试图显示水平填充的列表，我需要按垂直顺序显示它（如果没有第二列或第三列，则启用）。

有解决办法吗？

Answer 1

我不知道你会在哪里使用它，所以我的回答可能是错误的。 购买即可使用table标签

<div style="height:400px;">
    <table><ul style="list-style:none;">
        <tr>
            <td>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
            </td>
            <td>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
            </td>
            <td>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>9</li>
            </td>
        </tr></ul>
    </table>
</div>

Answer 2

我有一个使用 Flexbox 的解决方案。它要求你的 ul 有一个指定的高度。

ul {
    display: flex;
    list-style: none;
    flex-direction: column;
    flex-wrap: wrap;

    height: 400px;
}

li {
    flex-basis: 25%;
}

"flex-direction: column" 使项目垂直堆叠。 "flex-wrap: wrap" 使它们在填满后换行到下一列。列表项上的 "flex-basis: 25%" 使得每个项都是父项高度的四分之一。因此，如果您希望每列的行数更多或更少，可以更改此数字。