响应列表和第n个子选择器-Java 学习之路

我在理解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中没有左边框

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;
    }
}
```
回复于 2024-05-04T02:00:32+08:00

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

1 回答

相关问题