web-dev-qa-db-ja.com

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

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

Separators between elements.

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

ここで、2つの可能な解決策を紹介します。

  1. liタグをさらに追加するには（boo！）、
  2. 各要素の画像にセパレーターを含める（これは良いですが、ユーザーが「Home」をクリックする可能性がありますが、「Services」に到達する可能性があります。 「サービス」に属する）;

何をすべきか？

cssnavigationusabilityseparator
106
daGrevis

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

リスト項目の間にのみ表示されるようにするには、liの左側に画像を配置しますが、最初の画像には配置しません。

例えば：

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

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

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

63
ajcw

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

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

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

127
jrue

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

そう：

場合：後

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

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

ケース：前

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

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

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

.menustyle li + li:before

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

Sass を使用している場合、この目的で mixin を記述しました。

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

例：

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

これはあなたにこれを与えます：

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

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

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

これにより、イメージがロードされないため、実行速度が向上します。ただテストしてください.. :)

2
Rajiv Pingale

セパレーターをliバックグラウンドに追加し、リンクがセパレーターを覆うように拡大しないようにしてください。これは、セパレーターがクリックできないことを意味します。

2
Soufiane Hassou

リスト要素の背景としてそれを入れてください：

<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の後に来るliを意味します。

1
Faust

私はこれに対する最善の解決策は、私が使用するものであり、それが自然なCSS境界であると信じています：

border-right:1px solid;

次のようなパディングに注意する必要があります。

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

最後に、最後のliにその境界線を付けたくない場合は、次のように「border-right」の最後の子「none」を指定します。

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

幸運を ：）

1
Avi