113

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

要素間のセパレータ。

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

ここで私は2つの可能な解決策に到達します：

  1. li分離用のタグをさらに追加するには（ブー！）、
  2. 各要素の画像に区切り文字を含めます（これは優れていますが、ユーザーが「ホーム」をクリックする可能性がありますが、「サービス」に移動する可能性があります。これらは前後にあり、ユーザーが誤って区切り文字をクリックする可能性があるためです。 「サービス」に属する）;

何をすべきか？

4

9 に答える 9

140

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

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

これにより、元の質問の画像と同じように、各リストアイテムの間にバーが配置されます。ただし、隣接するセレクターを使用しているため、最初の要素の前にバーを配置しません。また、疑似セレクターを使用しているため:before、最後に疑似セレクターを配置しません。

于 2012-07-20T07:30:17.307 に答える
66

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

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

例えば：

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

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

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

于 2011-04-16T19:18:21.750 に答える
5

他の解決策は問題ありませんが、 ：afterを使用する場合は最後に、 ：beforeを使用する場合は最初に区切り文字を追加する必要はありません。

それで：

ケース：後

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

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

ケース：前

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

.link:first-child:before {
  content: '';
}
于 2016-04-28T15:30:09.003 に答える
5

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

.menustyle li + li:before {
  content: ' | ';
  padding: 0;
  position: relative;
  top: -2px;
}
于 2016-11-12T13:33:58.980 に答える
3

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

これにより、画像が読み込まれないため、実行速度が向上します。ただそれをテストしてください..:)

于 2012-08-15T05:50:32.977 に答える
2

セパレーターを背景に追加しli、リンクがセパレーターを覆うように拡大しないことを確認します。これは、セパレーターがクリックできないことを意味します。

于 2011-04-16T19:01:33.120 に答える
2

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;
}
于 2015-01-23T03:51:58.910 に答える
2

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

border-right:1px solid;

次のようにパディングを処理する必要がある場合があります。

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

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

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

幸運を ：）

于 2017-02-06T09:01:22.047 に答える
1

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

<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画像でタイリングを使用できるようになり、帯域幅が節約され、CSSスプライトに埋め込むことができます。これによりHTTP呼び出しが節約されます。

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

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

于 2011-04-16T19:22:33.270 に答える