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

我想创建这样一个多列列表： 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布局？

来源

2017-03-05 Sempervivum

是的，你可以创建描述的多列列表，如果你让ul Flex容器，限制其高度，改变方向柱，让它包装：

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>

来源

2017-03-05 20:13:02 Johannes

这似乎是一个精解。完全自我调整，不需要定义列的数量，不需要额外的元素，只需一个连续列表。 – Sempervivum

BTW：我怎样才能做这样的内联演示（“运行代码片段”）？ – Sempervivum

@Sempervivum问题和答案框中有不同的符号。如果你徘徊他们，你会看到他们的意义。其中之一是制作摘录。 – Johannes

考虑使用CSS3多栏布局为：

CSS3 Multiple Columns

只需使用一个列表就可以做到这一点，并用CSS定义列数。如果您检查CSS3多列布局浏览器支持here，您可以看到大多数浏览器的部分支持，因为它们不支持折前，折后和折入内部属性。但是他们确实支持用前缀创建多列列表所需的属性。

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

来源

2017-03-05 21:20:52 Greg

也是一个很好的解决方案。由于色调的数量必须调整，因此不能完全自我调整。 – Sempervivum

实际上，对于需要添加或删除列表项的列表来说，这是一个更好的解决方案。您可以在响应中断点处设置列数并将其忘记。使用第一种（接受的解决方案），每次添加或删除列表项时，都必须手动调整高度;对于给定数量的项目，什么样的高度效果最好并不明显：大量的试验和错误。 – Ray

使用'column-width'而不是'column-count'会根据容器的宽度自动调整列数 – jnnnnn

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

回答

相关问题