html - 垂直导航填充

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