将列表项显示为列

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

我有一个使用 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%”使得每个项目都是父项高度的四分之一。因此，如果您希望每列有更多或更少的行数，可以更改此数字。

Answer 2

我不知道你会在哪里使用它，所以也许我的回答是错误的。 买就可以用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>