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

当然我可以使用表格（不，谢谢）或浮动，但我希望使用 CSScolumns属性。

Answer 1

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

要么使用 display: inline-block; 或使用 display: flex;

这是显示： inline-block; 例子：

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

<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 中有些支持 Flex，但在 Edge 中完全支持。所有常青树都完全支持它。

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%;
}

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