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自动排列列吗？例如。通过使用我还不熟悉的弹性布局？

Answer 1

是的，您可以创建一个多列列表，如果您将ul设置为Flex容器，将flex-direction更改为column，允许它通过应用{{1另外通过限制它flex-wrap: wrap：

强制它换行

height

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

Answer 2

考虑使用CSS3多列布局：

CSS3 Multiple Columns

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: