如何从单个无序列表创建多列？

Question

我想创建一个这样的多列列表:https: //jsfiddle.net/37dfwf4u/

为每列使用不同的列表时没问题:

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<ul>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

ul {
    display:inline-block;
}

但是,这可以通过连续列表和纯CSS来完成,以便CSS自动排列列吗？例如,使用我还不熟悉的flex布局？

Answer 1

是的,您可以创建一个多列列表,如果您创建ul一个Flex容器,更改flex-direction为column,允许它通过应用进行换行,flex-wrap: wrap并通过限制它来强制它换行height:

ul {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
</ul>

Answer 2

考虑使用CSS3多列布局:

CSS3多列

您只需使用一个列表即可完成此操作,并使用CSS定义列数.如果你在这里检查CSS3多列布局浏览器支持,你可以看到大多数浏览器的部分支持,因为它们不支持break-before,break-after和break-inside属性.但它们确实支持创建带前缀的多列列表所需的属性.

.container {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

ul {
  margin: 0;
}

<div class="container">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
  </ul>
</div>