1

ナビゲーションバーがあり、絶対に配置しています。パディングに問題があります。上下のパディングがアンカータグに反映されず、左右のみに影響します。なぜこれが発生するのでしょうか?

<nav class="main-nav">
    <ul class="main-nav-links">
        <li class="main-link"><a href="#">HOME</a></li>
        <li class="main-link"><a href="#">ABOUT US</a></li>
        <li class="main-link"><a href="#">ORDER</a></li>
        <li class="main-link"><a href="#">CONTACT</a></li>
    </ul>
</nav>

ナビのcssは以下です。

.main-nav {
    position: absolute;
    bottom: 0;
    margin-left: 290px;
}

.main-link {
    list-style: none;
    background-color: #1281f4;
    display: block; 
    float: left;        
}

.main-link > a {
    text-decoration: none;
    color: #073a4f;
    padding: 1em;
}
4

2 に答える 2

4

に追加display: inline-block;し<a>ます。

そのままでは、テキストとしてレンダリングされるため、垂直方向のパディングを含めることはできません。

line-height別の方法は、 ;を使用することです。

ここにデモがあります: fiddle .

于 2013-08-03T12:50:52.003 に答える