Question

我在理解nth-child时遇到问题，以便使用媒体查询设置列表的样式。我有一个无序的6items列表，使用display:inline-block;以下列方式水平显示项目：

[item1] [item2] [item3] .... [item6]

ul {
    list-style-type: none;
    margin-left: auto;
    padding:0;
    text-align:center;
    li {
        display:inline-block;
        font-size: ms(3);
        padding-left: 0.5em;
        margin-left: 0.5em;
        margin-bottom: 0.2em;
        border-left: 1px dotted #d1d1d1;
        &:first-child {border:none; margin-left:0;};
        a {text-decoration:none;}

}

我正在使用基础3.2和Sass，这个无序列表位于12列的div中。理想情况下，当浏览器宽度小于768px时，我希望列表分解如下：

[item1] [item2] [item3]

[item4] [item5] [item6]

此外，当屏幕小于320px时，我希望列表显示如下：

[item1] [item2]

[item3] [item4]

[item5] [item6]

我该如何实现这样的目标？

另外，我正在使用border-left: 1px dotted #d2d2d2在列表项之间创建分隔符，而第一项没有边框。我如何利用nth-child以便在768的情况下我不会获得第1和第4项的左边界？另外，在320案例中我应该如何实现nth-child以便在项目1,3和5中没有左边框

Answer 1

您是否考虑过使用CSS Columns模块？它将为您完成所有数学运算（填充，分隔符出现的位置等）。唯一的问题是它以不同的顺序对项目进行排序。

如果使用特定宽度的列宽，则会根据需要添加/删除列，而无需媒体查询。

http://jsfiddle.net/W84Ja/

ul {
    padding: 0;
    columns: 8em;
    column-rule: 1px solid;
    column-gap: 2em;
    list-style-type: none;
}

如果您正在寻找百分比样式部门，请使用特定数量的列并结合媒体查询。

http://jsfiddle.net/W84Ja/1/

ul {
    padding: 0;
    columns: 2;
    column-rule: 1px solid;
    column-gap: 2em;
    list-style-type: none;
}

@media (min-width: 25em) {
    ul {
        columns: 3;
    }
}

如果你仍然使用内联阻止列表项，那么就可以这样做了：

http://jsfiddle.net/W84Ja/2/

@media (max-width: 20em) {
    li:nth-child(even) {
        border-left: 1px solid;
    }
}

@media (min-width: 20em) and (max-width: 30em) {
    li:nth-child(3n+2), li:nth-child(3n+3) {
        border-left: 1px solid;
    }
}

响应列表和第n个子选择器

1 个答案: