2

メディア クエリを使用してリストのスタイルを設定するために、nth-child を理​​解するのに問題があります。display:inline-block;次の方法で項目を水平に表示する 6 項目の順序付けられていないリストがあります。

[アイテム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]

さらに、画面が 320px より小さい場合、次のようにリストを表示したいと思います。

[アイテム1] [アイテム2]

[アイテム3] [アイテム4]

[アイテム5] [アイテム6]

どうすればこのようなものを実装できますか?

また、border-left: 1px dotted #d2d2d2最初の項目の境界線を持たずに、リスト項目間にセパレーターを作成するために使用しています。768 の場合、1 番目と 4 番目のアイテムの両方の左境界線を取得しないように、nth-child をどのように利用できますか? さらに、320 の場合、アイテム 1、3、および 5 に左境界線がないように、どのように nth-child を実装する必要がありますか?

4

1 に答える 1

0

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

まだインライン ブロック リスト アイテムを使用する場合は、次のようにします。

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 に答える