html - 试图给我的导航菜单项添加边框底部

Question

我正在尝试为单击菜单项时出现的 ul li a 菜单元素添加边框底部。

我已经有了这个效果，但我的边框底部看起来有点向下，就像在我的导航菜单后面一样。

有人可以帮助我了解正在发生的事情吗？

我的 Html:

<nav id="menu">
    <ul>    
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</nav>

我的 CSS:

#menu
{
    width:960px; 
    height:auto; 
    margin:0 auto 0 auto;
    background:green;
}

#menu ul
{
    list-style-type:none;
}

#menu ul li 
{ 
    height:46px;
    line-height:46px; 
    font-family:'arial'; 
    font-weight:300;
    display:inline-block;
    position:relative;
}

#menu ul li a
{
    text-decoration:none;
    color:#ccc;  
    display:block; 
    margin-right:5px; 
    height:46px; 
    line-height:46px; 
    padding:0 5px 0 5px;
    font-size:20px;     
}

// this boder is behind the menu!

#menu ul li.active a
{
    color:#fff;
    border-bottom:1px solid  #000;
}

我的 jsfiddle:

http://jsfiddle.net/mibb/Y4HKF/

Answer 1

这是因为您为 a 设置了 display:block，所以边框将围绕框(height 设置为46 像素)。看起来你明确地将 padding-bottom 设置为 0 然后它仍然应该工作(底部边框应该靠近链接文本？)但不是真的，因为你也将 line-height 设置为等于 height(均为 46px)，因此文本垂直居中并在基线和边界底部。

要解决此问题，只需删除 a 标签的 css 中的 display: block; 行。你根本不需要它，删除会解决你的问题:

#menu ul li a {
  text-decoration:none;
  color:#ccc;        
  margin-right:5px; 
  height:46px; 
  line-height:46px; 
  padding:0 5px 0 5px;
  font-size:20px;     
}