横向扩展CSS列而不是纵向

Question

我不太确定这是可能的（至少不是我的经验或谷歌搜索），但我想知道是否有办法强制CSS列的顺序。例如，而不是：

item1  item4  item7 
item2  item5  item8 
item3  item6  item9 

为了他们是这样的：

item1  item2  item3 
item4  item5  item6 
item7  item8  item9 

给定的HTML这样的：

<ul> 
    <li>item1</li> 
    <li>item2</li> 
    etc... 
</ul> 

当然，我可以用一个表（不，谢谢）或浮动，但我希望能够使用CSS columns属性。

Answer 1

有两种方法可以做到这一点。

可以使用display：inline-block;或使用display：flex;

这里是显示：inline-block;例如：

ul { 
 
\t margin-left: .25em; 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
} 
 
li { 
 
\t margin-left: 0; 
 
\t padding-left: 0; 
 
\t display: inline-block; 
 
\t width: 30%; 
 
\t vertical-align: top; 
 
}

<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    <li>item 5</li> 
 
    <li>item 6</li> 
 
    <li>item 7</li> 
 
    <li>item 8</li> 
 
    <li>item 9</li> 
 
</ul>

这里是显示：弯曲;例如：

注：Flex在IE11中有所支持，但在Edge中完全支持。它在所有常青树中得到充分支持。

ul { 
 
\t margin-left: .25em; 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
li { 
 
\t margin-left: 0; 
 
\t padding-left: 0; 
 
\t width: 33.3%; 
 
}

<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    <li>item 5</li> 
 
    <li>item 6</li> 
 
    <li>item 7</li> 
 
    <li>item 8</li> 
 
    <li>item 9</li> 
 
</ul>