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

Question

我在理解 nth-child 以使用媒体查询设置列表样式时遇到问题。我有一个 6 个项目的无序列表，它使用 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;}

}

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

[item1] [item2] [item3]

[item4] [item5] [item6]

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

[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 列模块？它将为您完成所有数学运算（填充、分隔线出现的位置等）。唯一的问题是它以与您想要的顺序不同的顺序对项目进行排序。

如果您使用特定宽度的列宽，它将根据设备宽度的需要添加/删除列，而无需媒体查询。

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;
    }
}

如果您仍然打算使用 inline-block 列表项，那么可以这样做：

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;
    }
}