0

ナビゲーションにパイプ (|) スタイルを追加しようとしています。

私のsusyコードは @include with-layout(6 inside, true){ @include span(1); です。

&::before { content: " | "; を追加しました。}

しかし、 &:first-child { &::before { content: " "; を追加すると } }

ナビゲーションのすべてのインスタンスが最初の子ではないことを認識しません.htmlのすべてのアイテムを最初の子と見なします。これを修正するにはどうすればよいですか?

また、パイプをセパレーターとして表示する方法についての提案 (つまり、重要なナビゲーション項目の間) - 微妙な効果が必要なため、border-left を使用したくありません。

ありがとう、

ビクトリア

4

2 に答える 2

0

わかりました-border-rightを50％に設定して問題を回避しました（これはパイプと同じように見え、ボタンの間に自然に配置されます）---しかし、なぜ最初の子が上記のコードではセレクターは機能しません。

ここで、最後の子を使用して最後の境界線を削除したいと思います!!! 原則は上記の例と同じですが、必要に応じてさらにコードを投稿できます。

ありがとう

于 2015-03-17T11:54:30.060 に答える
0

答えてくれてありがとう...私はあなたのために今より良いコードを投稿しようとします. 残念なことに、jsfiddle やコード ペンを使用して例を示すことができません。これらのコード スニペット サイトが css のみを受け入れ、scss と susy を受け入れないのは非常に残念です!!!

Ok...

HTMLは -

<div class="nav">
    <ul>
        <li><a class="button active" href="#home">Home</a></li>
        <li><a class="button" href="palms-for-sale.html">Shop</a></li> 
        <li><a class="button" href="ordering.html">Ordering</a></li>
        <li><a class="button" href="delivery.html">Delivery</a></li>
        <li><a class="button" href="plant-care.html">Care</a></li>
        <li><a class="button" href="about.html">About</a></li>
    </ul>
</div>

scss は -

        .nav {

         @include susy-breakpoint($xmedium-bp, $medium) {
            @include span(8 of 8 at 0);
            @include margin-leader(1);
            height: 30px;
            line-height: 30px;
            vertical-align: middle;

            ul {
                li {
                    display: inline;
                }
            }
        }

        @include susy-breakpoint($large-bp, $large) {
                @include span(8 of 8 at 0);
            }

        ul {
            li {
                a {

                    &.button {

                        @include susy-breakpoint($xmedium-bp, $medium) {
                            @include with-layout(6 inside, true){
                                @include span(1);

                                &::before {
                                    content: " | ";
                                }

                                &:first-child {
                                    &::before {
                                        content: "";
                                    }
                                }
                            }
                        }

                        @include susy-breakpoint($large-bp, $large) {
                            @include with-layout(6 inside, true){
                                @include span(1);
                            }
                         }
                    }
                }
            }
        }
    }

例を十分に取り除いていただければ幸いです。

ご覧いただきありがとうございます。

Vx

于 2015-03-17T11:43:04.807 に答える