列表中的全高导航栏链接

Question

这是我的代码：

http://jsfiddle.net/spadez/FbADY/5/

我想知道什么是正确的语义方式，使我的导航链接延伸导航栏的整个高度，文本垂直居中。

我尝试使用与导航栏相同的line-height设置链接，但它并未影响链接的高度。

Answer 1

.navigation li a {
    display: block;
    height:60px; /* same as header */
    line-height:60px; /* same as header */
}

JSfiddle Demo

Answer 2

如果你有这样的要求，那么只需在li和padding中添加边距到href。

li {
    list-style:none;
    margin: 20px 5px 15px;
}
a {
    text-decoration:none;
    padding: 15px 5px 15px;    
}

Demo Link

Answer 3

我相信你想补充一下：

a {
    text-decoration:none;
    font-size:40px;
}

和

.navigation li a {
    color: #fff;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height:60px;
    padding-left: 30px;
    padding-right: 30px;
}

您可以在此处找到演示：http://jsfiddle.net/FbADY/8/