无序（UL）列表分布 - 首先设置为垂直，然后设置为水平

Question

通过使用以下HTML

<ul>
<li>1.List</li>
<li>2.List</li>
<li>3.List</li>
<li>4.List</li>
<li>5.List</li>
<li>6.List</li>
<li>7.List</li>
<li>8.List</li>
<li>9.List</li>
<li>10.List</li>
<li>11.List</li>
<li>12.List</li>
</ul>

请帮我创建这种类型的列表，只使用CSS。列表是动态的，所以我不能在其间添加任何其他类。

我试图创建https://jsfiddle.net/u39m0hk8/2/我需要更好的CSS来创建分发。

Answer 1

这可以通过column-count轻松完成

ul {
  column-count: 3;
  list-style-type: none;
  padding; 0;
  margin: 0;
  column-gap: 2px;
}
li {
  background-color: #f00;
  margin-bottom: 2px;
  color: white;
  text-indent: 10px;
  padding: 3px 0;
}

<ul>
  <li>1.List</li>
  <li>2.List</li>
  <li>3.List</li>
  <li>4.List</li>
  <li>5.List</li>
  <li>6.List</li>
  <li>7.List</li>
  <li>8.List</li>
  <li>9.List</li>
  <li>10.List</li>
  <li>11.List</li>
  <li>12.List</li>
</ul>

Answer 2

有两个明显的解决方案，第一个是使用CSS Columns：

ul {
  /* Defines the number of columns the 
     content should occupy: */
  column-count: 3
}

li {
  /* Irrelevant, but I used generated content
     to display the list-item numbers: */
  list-style-position: inside;
  list-style-type: decimal;
  color: #fff;
  background-color: red;
  margin: 4px;
}

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

第二个是使用CSS Grid：

ul {
  /* using CSS Grid layout: */
  display: grid;

  /* defining three columns ('3') each column being one
     equal fraction ('1fr') of the available space: */
  grid-template-columns: repeat(3, 1fr);

  /* setting a gap between each of the list-items: */
  grid-gap: 4px;
}

li {
  list-style-position: inside;
  list-style-type: decimal;
  color: #fff;
  background-color: red;
}

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

参考文献：

• column-count。
• CSS Grid layout。