2

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

[项目1] [项目2] [项目3] .... [项目6]

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 时，我希望列表分解如下：

[项目 1] [项目 2] [项目 3]

[项目4] [项目5] [项目6]

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

[项目1] [项目2]

[项目3] [项目4]

[项目5] [项目6]

我怎样才能实现这样的事情？

另外，我border-left: 1px dotted #d2d2d2用来在列表项之间制作分隔符，而第一项没有边框。我如何利用 nth-child 以便在 768 的情况下我没有得到第 1 项和第 4 项的左边框？此外，在 320 的情况下，我应该如何实现 nth-child 以便项目 1,3 和 5 中没有左边框

4

1 回答 1

0

您是否考虑过使用 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;
    }
}
于 2013-01-18T13:52:32.473 回答