格式化带有列的项目列表

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>