0

私のナビゲーションバーには背景が設定されており、リンクの左側と右側に22pxのパディングがあります。これは正確ではないため、右側に以下のコンテンツと一致しない小さなスペースがあります。

HTML

<ul>
<li><a href="#">Bikes</a></li>
<li><a href="#">Components</a></li>
<li><a href="#">Featured Merch</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Apparel</a></li>
</ul>

それから私のCSS

 nav ul {
        margin-left: 0px;
    }

 nav li {
        text-decoration: none;
        display: inline;
        text-transform: uppercase;
        font-size: 18px;
    }

    nav a {
        color: white;
        background-color: #4c4d4f;
        padding: 2px 22px;
    }

    nav a:hover {
        color: #FDB813;
        text-decoration: none;
    }

ありがとうございました

4

1 に答える 1

1

まず、display: inlineあなたが言及したスペースが原因でした。それを に置き換えfloat: leftます。

<li>次に、 s の間にスペースが必要になる場合があります。

nav li {
    margin-right: 4px;
}

そして、最後のマージンを削除します<li>:

nav li:last-child {
    margin-right: 0;
}

次に、必要な動作があります。

jsFiddleを参照してください

于 2013-01-28T05:55:35.623 に答える