Question

我有一个列表，我想分成2个列。

我可以这样做但只需使用

li {
  float: left;
  width: 50%;
}

但我希望垂直列出2列，而不是水平列出。

例如，而不是

 A B
 C D
 E F
 G H

我想：

 A E
 B F
 C G
 D H

我需要将样式应用于所有元素，包括和在第5个孩子之后将它们向右浮动。类似的东西：

li {
  float: left;
  width: 50%;
}

li:nth-child(5):after {
 float: right;
}

有人知道是否可以仅使用CSS执行此操作？

Answer 1

您可以使用display:flex和order属性，订购。 order属性是Flexible Box Layout模块的子属性。默认情况下，Flex项目的显示顺序与它们在源文档中显示的顺序相同。订单属性可用于更改此排序。运行代码段，这与OP

完全相同

＆＃13;

ul {
	margin:0;
	padding:0;
	display: flex;
  	flex-flow: row wrap;
}
ul li {
	width:50%;
	display:block;
}
ul li:nth-child(1){
	order: 1;
	width: 50%;
}

ul li:nth-child(2) {
	order: 3;
	width: 50%;
}
ul li:nth-child(3){
	order: 5;
	width: 50%;
}

ul li:nth-child(4) {
	order: 7;
	width: 50%;
}

ul li:nth-child(5){
	order: 2;
	width: 50%;
}

ul li:nth-child(6) {
	order: 4;
	width: 50%;
}
ul li:nth-child(7){
	order: 6;
	width: 50%;
}

ul li:nth-child(8) {
	order: 8;
	width: 50%;
}

＆＃13;

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
</ul>

＆＃13;

Answer 2

有可用的在线第n计算器生成器。您只需填写数字即可根据您的要求计算出第n个。

检查出来 http://nth-calculator.com/

现在根据您的要求：：第n个孩子（N + 5）

Answer 3

CSS3可以做列！关于专栏的好处是，要在响应式设计中清除它，您只需更改计数。

li {
  text-align: center;
  list-style-type: none;
}
div {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 5px; /* Chrome, Safari, Opera */
    -moz-column-gap: 5px; /* Firefox */
    column-gap: 5px;
    width: 49px;
}

<div>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  </div>

没有杂乱的浮动，没有变化的显示类型，它几乎适用于所有现代浏览器。这是一个Link from W3 Schools

仅使用CSS将列表转换为2列

3 个答案: