質問: ナビゲーション用のセパレーター ナビゲーションの要素間にセパレータを追加する必要があります。セパレータは画像です。私のhtml構造は次のようなものです。ol> li> a> img。ここで、2つの可能な解決策を紹介します。 liタグをさらに追加するには(boo!)、 各要素の画像にセパレーターを含める(これは良いですが、ユーザーが「home」をクリックする可能性がありますが、「services」に到達する可能性があります。 「サービス」に属する); 何をすべきか?
回答: リスト要素の背景としてそれを入れてください:<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を意味します。