Question

我希望我的李分布在这两行中：

item 1    item 3    item 5    item 7    item 9    ....
item 2    item 4    item 6    item 8    ......

我的CSS非常糟糕，所以我不知道如何实现这个目标并且找不到任何东西......我尝试了一些偶数和奇数项目的东西，但我无法弄清楚如何强制均匀奇数项下面的项目。

Answer 1

您可以使用flexbox来实现此排序。支持非常好（http://caniuse.com/#feat=flexbox），但您需要为旧版本的IE提供回退。

ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:200px;
}
li {
    color: #000000;
    height: 50px;
    margin: 0;
    padding: 0;
    width: 100px;
}

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

Answer 2

您可以使用:nth-child选择器选择该列表项中的奇数元素。

以下是一个例子：

<强> CSS

ul {
    position: relative;
    white-space: nowrap;
}
li {
    display: inline-block;
    list-style-type: none;
    padding: 0px 5px;
}
li:nth-child(2n) {
    top: 100%;
    position: absolute;
    margin-left: -36px;   /* Changes as per the width of the first element */
}

<强> Working Fiddle

CSS分配li超过2行，无限制的项目

2 个答案: