格式化带有列的项目列表

Posted 2023-03-07

【中文标题】格式化带有列的项目列表

【英文标题】：Format list of items with columns

【发布时间】：2021-03-29 09:14:57

【问题描述】：

我的物品清单很长：

<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 框架。

【问题讨论】：

您使用的是 bootstrap 还是任何其他 CSS 框架？

TailwindCSS 框架

【参考方案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>

【讨论】：

我认为这对浏览器的支持很低。有没有其他方法可以使用网格？

在 chrome 50 中添加了列支持。我们现在使用的是 chrome 88 版。觉得你很高兴去那里