ナビゲーション用セパレータ

ナビゲーションの要素間にセパレータを追加する必要があります。セパレータは画像です。

私のHTML構造は次のようなものですol > li > a > img。

ここで私は2つの可能な解決策に行きます：

1. li分離のためのタグをさらに追加するには（boo！）、
2. 各要素の画像にセパレーターを含めます（これはより良い方法ですが、ユーザーが「ホーム」などをクリックする可能性がありますが、「サービス」に移動する可能性があります。それらが前後にあり、ユーザーが誤ってセパレーターをクリックする可能性があるためです。 「サービス」に属する）;

何をすべきか？

セパレータ画像をの背景画像として使用するだけliです。

リスト項目の間にのみ表示されるようにするには、画像をの左側に配置liし、最初の画像には配置しないでください。

例えば：

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

このCSSは、別のリストアイテムの後に続くすべてのリストアイテムに画像を追加します。

NB。隣接するセレクター（li + li）はIE6では機能しないので、背景画像を従来のli（条件付きスタイルシートを使用）に追加し、エッジの1つに負のマージンを適用する必要があることに注意してください。

セパレータに画像を使用する差し迫った必要がない場合は、純粋なCSSでこれを行うことができます。

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

これにより、元の質問の画像で説明したように、各リスト項目の間にバーが配置されます。ただし、隣接するセレクターを使用しているため、最初の要素の前にバーは配置されません。また、:before疑似セレクターを使用しているため、最後に1つは配置されません。

li仕切りを追加する場所に要素を1つ追加できます

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

CSSでは、次のコードを追加できます。

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

イメージが読み込まれないため、実行速度が向上します。試してみてください.. :)

他の解決策は問題ありませんが、：afterを使用する場合は最後にセパレータを追加する必要はなく、：beforeを使用する場合は最初にセパレータを追加する必要はありません。

そう：

ケース：後

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

ケース：前

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

セパレータをメニューテキストに対して垂直方向に中央揃えにするには、

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

セパレータをli背景に追加し、リンクがセパレータをカバーするように拡大しないことを確認します。つまり、セパレータはクリックできません。

Sassを使用している人のために、この目的のためのミックスインを作成しました。

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

例：

@include addSeparator('li', '|', 1em);

これはあなたにこれを与えるでしょう：

li+li:before {
  content: "|";
  padding: 0 1em;
}

私はこれのための最良の解決策は私が使用するものであり、それは自然なcssボーダーであると信じています：

border-right:1px solid;

次のようにパディングを処理する必要があるかもしれません：

padding-left: 5px;
padding-right: 5px;

最後に、最後のliにその分離したボーダーを持たせたくない場合は、次のように "border-right"の最後の子を "none"にします。

li:last-child{
  border-right:none;
}

幸運を ：）

リスト要素の背景として配置します。

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

次に、アクセシビリティに別のマークアップをお勧めします。
画像をインラインで埋め込むのではなく、テキストをテキストとして挿入し、それぞれをスパンで囲み、画像を背景として適用し、テキストをdisplay：noneで非表示にします。これはより柔軟なスタイリングを提供し、1px幅のbg画像でタイリングを使用できるようにし、帯域幅を節約し、HTTP呼び出しを節約するCSSスプライトに埋め込むことができます。

HTML：

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS：

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

UPDATE OK、私は他の人が私の前で同じような答えを得たのを見ます-そしてジョンはまた、li + liセレクターを使用することにより、最初の要素の前にセパレーターが表示されないようにする手段を含むことに注意します-これは、任意のliが次の後に来ることを意味します李。