Question

我有一个导航栏，我定位它是绝对的，我有填充上面的问题，顶部和底部填充没有生效锚标记，只有左边和右边，任何想法为什么这可能正在发生？

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

Answer 1

将display: inline-block;添加到<a>。

它的方式，它被渲染为一段文字，因此，它不能有垂直填充。

另一种方法是使用line-height;

以下是演示： fiddle 。

Answer 2

试试这个

http://jsfiddle.net/xdpHJ/

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;
    display: inline-block;
}

垂直导航填充

2 个答案: