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>

当然我可以使用表格(不，谢谢)或 float ，但我希望使用 CSS columns 属性。

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>