水平传播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;

这是display：inline-block;例如：

＆＃13;

＆＃13;

n

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这里是display：flex;例如：

注意：在IE11中稍微支持Flex，但在Edge中完全支持。它在所有常青树中得到了全面支持。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;