0

このWeb サイトでは、メニューは次の構造になっています。

<ul>
    <li class="page_item page-item-2 current_page_item">
        <a href="index.html">Home</a>
    </li>
    <li class="page_item page-item-7">
        <a href="features/index.html">Features</a>
    </li>
    <li class="page_item page-item-18">
        <a href="news-reviews/index.html">News &amp; Reviews</a>
    </li>
    <li class="page_item page-item-20">
        <a href="contact/index.html">Contact</a>
    </li>
</ul>

このcurrent_page_itemクラスは、次のルールによって、現在選択されているメニュー項目の背景を黒に変更します。

.mainnav li.current_page_item a {
    background: url("images/bg_nav_hover.png") no-repeat scroll right center transparent;
}

これはホームメニュー項目では機能しますが、他のすべての項目では、選択したメニュー項目の左側に小さな隙間が残り、下の画像の黄色の円で強調表示されます

ここに画像の説明を入力

ホーム以外のすべてのメニュー項目でこの問題が発生する理由がわかりません。

4

2 に答える 2

3

あなたの<li>タグはdisplay: inline-block;あり、タグの間にはスペースがあります。

<li>タグはであるため、要素やテキストとinline-block同様に、HTML の空白を尊重します。inline

最終的に、背景画像は要素の背景を正しくカバーしています。スペースを取り除く最善の方法は、</li>と次の<li>タグの間の空白をすべて削除することです。

以下で @ajp15243 が述べているように、終了タグを省略したり、奇抜なトリックを使用して HTML に空白を飲み込ませたりすることができます。

于 2013-09-16T17:47:23.813 に答える