html - 无序 (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 来创建发行版。

标签： htmlcsshtml-lists

Answer 1

有两个明显的解决方案，第一个是使用 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 网格布局。