将 <li> 列表垂直更改为水平，间隔为 4 行 [重复]答案

【问题标题】：Change <li> list vertically to horozontally with 4 lines interval [duplicate]将 <li> 列表垂直更改为水平，间隔为 4 行 [重复]
【发布时间】：2020-02-20 02:51:06
【问题描述】：

我有一个这样的 ul li 列表

项目行 1
项目行 2
项目行 3
项目行 4
项目行 5
项目行 6
第 7 项
项目行 8
项目行 9
项目行 10
项目行 11
项目行 12

我需要改成这个，只有 CSS 才有可能？

项目行 1 项目行 5 项目行 9 项目行 2 项目行 6 项目行 10 项目行 3 项目行 7 项目行 11 项目行 4 项目行 8 项目行 12

问候

丹尼尔

【问题讨论】：

阅读column

标签： html css

【解决方案1】：

在<ul> 上使用columns。

ul {
  columns: 3;
  }

<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>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
</ul>

【讨论】：