Question

这是我目前的代码：http://jsfiddle.net/spadez/gMm2P/5/

任何人都可以告诉我如何将文本垂直对齐在导航栏的中间，但是在悬停或活动时菜单项底部的导航栏底部有一个3px蓝色条。

例如：http://dribbble.com/shots/1412015-Restaurant-admin/attachments/206070

我的代码（没有中心对齐，悬停时蓝色条位置太高）：

#header {background-color: white; padding: 0 100 0 100; height: 70px;}
#nav {padding-left: 80px;}
#nav a:hover {border-bottom: 3px solid blue;}
#nav a:active {border-bottom: 3px solid blue;}

Answer 1

基于你的jsfiddle，我能够使用它来实现：

#nav li { height: 70px; }
#nav li a {
    height: 67px;
    line-height: 67px;
    border-bottom: 3px solid #fff;
    display: inline-block;
}
#nav li a:hover { border-color: blue; }

Answer 2

对#nav

使用以下样式

#nav a:hover {
border-bottom: 3px solid blue;
padding-bottom: 23px;
}

工作演示Here

菜单 - 将文本中间与底部对齐边框对齐

2 个答案: