用列格式化项目列表

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>

用列格式化项目列表

Format list of items with columns

html

css

flexbox

tailwind-css