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

I'd like to create a multi column list like this: https://jsfiddle.net/37dfwf4u/

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

No problem when using a different list for each column:

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

<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;
}

However, can this be done by a continuous list and pure CSS so that the CSS arranges the columns automatically? E.g. by use of flex layout which I'm not yet familiar with?

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

2 个解决方案

#1

Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to column, allow it to wrap by applying flex-wrap: wrap and additionally force it to wrap by limiting its height:

是的，您可以创建一个多列列表，如果您将ul设置为flex容器，将flex-direction更改为column，允许它通过应用flex-wrap：wrap进行换行，另外通过限制其高度强制它换行：

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>
<style></style>

#2

Consider using CSS3 Multi-column Layout for that:

考虑使用CSS3多列布局：

CSS3 Multiple Columns

CSS3多列

You can do that using just one list and define the number of columns with CSS. If you check CSS3 Multi-column layout browser support here you can see partial support by most of the browsers, because they do not support break-before, break-after and break-inside properties. But they do support the properties you will need to create a multi column list with a prefix.

您只需使用一个列表即可完成此操作，并使用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>

#1

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>
<style></style>

#2