html – CSS分配超过2行的li,无限制的项目

发布时间：2020-12-14 23:20:44 所属栏目：资源来源：网络整理

导读：我希望我的li分布在2行,如下所示： item 1 item 3 item 5 item 7 item 9 ....item 2 item 4 item 6 item 8 ...... 我的CSS真的很糟糕,所以我不知道如何实现这一点,并且找不到任何关于这个我尝试了一些偶数和奇数项目的东西,但我无法弄清楚如何强制甚至奇数以

我希望我的li分布在2行,如下所示：

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

我的CSS真的很糟糕,所以我不知道如何实现这一点,并且找不到任何关于这个…我尝试了一些偶数和奇数项目的东西,但我无法弄清楚如何强制甚至奇数以下的项目项目.

最佳答案

您可以使用：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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!