格式化带有列的项目列表

Posted

技术标签:

【中文标题】格式化带有列的项目列表【英文标题】: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 版。觉得你很高兴去那里

以上是关于格式化带有列的项目列表的主要内容,如果未能解决你的问题,请参考以下文章