我怎样才能从一个单一的无序列表创建多列？ [英] How can I create multi columns from a single unordered list?

问题描述

我想创建一个多列列表，如下所示：
https://jsfiddle.net / 37dfwf4u /

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

pre > < 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 {
显示：inline-block;
}


但是，这可以通过连续列表和纯CSS来完成， CSS自动排列列？
E.g.通过使用flex布局，我还不熟悉？

解决方案

是的，如果您使 ul 一个flex容器，限制它的高度，改变方向到列并让它换行：

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

< pre class =snippet-code-html lang-html prettyprint-override> < ul>< li> item1< / li>< li> item2< / li>< li> item3< ; /立GT;<李> ITEM4< /立GT;<李> ITEM5< /立GT;<李> ITEM6< /立GT;<李> item7< /立GT;<李> item8< /立GT;< ;李> ITEM1和LT; /立GT;<李> ITEM2< /立GT;<李>项目3< /立GT;<李> ITEM4< /立GT;<李> ITEM5< /立GT;<李> ITEM6< /立GT;<李> item7< /立GT;<李>项8 LT; /立GT;<李> ITEM4< /立GT;<李> ITEM5< /立GT;<李> ITEM6< /立GT;<李> item7< /立GT;<李> item8< /锂> < / ul>< style>< / style>

I'd like to create a multi column list like this: 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?

解决方案

Yes, if you make the ula flex container, limit its height, change the direction to column and let it 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>

这篇关于我怎样才能从一个单一的无序列表创建多列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！