设置包含列的项目列表的格式

Question

我有一个很长的项目列表：

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<!-- various number of items -->
</ul>

如何使用列呈现此列表先填充列。

Item 1 | Item 5
Item 2 | Item 6
Item 3 | Item 7
Item 4 |

列数也必须是可变的(对于响应布局(。

我使用TailwindCSS框架。

Answer 1

如果需要更改不同设备的列数，请添加媒体查询

ul{
display:inline-block;
column-count:2;
column-gap:10vw;
list-style-type:none;
}

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<!-- various number of items -->
</ul>