Question

我正在尝试将border-bottom设置为单击菜单项时出现的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

这是因为您为display:block设置了a，因此边框将围绕框（height设置为46px）。看起来你明确地将padding-bottom设置为0然后它仍然可以工作（底部边框应该接近链接文本？）但不是真的，因为你还将line-height设置为等于height（两者都是46px），因此文本垂直居中并在基线和边界底部之间留出空格。

要解决此问题，只需删除css中display: block;标记的行a即可。您根本不需要它，删除将解决您的问题：

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

Answer 2

只需添加box-sizing：

即可

#menu ul li.active a {
    box-sizing: border-box;
}

Answer 3

将边框设置为锚点。一个锚只会占据其周围任何元素的空间，因此，将边框设置为锚点就像将其设置为<li>本身。

您应该使用跨度将文本包装在锚点中，该跨度占用文本的空间并将边框设置为跨度。

这是一个例子：

http://jsfiddle.net/TheBanana/Y4HKF/5/

Answer 4

我不确定你的JSFiddle是否准确地代表了你的问题，但无论如何我会建议一个基于此的解决方案。

您的JSFiddle示例根本没有在“li.active a”上显示边框（如果删除ul元素上的绿色背景，您将看到没有边框存在。）原因，至少在JSFiddle示例中，注释是“//这个boder在菜单后面！”未被识别为CSS注释，从而阻止其后的代码工作。我实际上可以发誓我已经在某些环境中看到这种工作正常，但在这种情况下肯定不起作用。

在Stack Overflow上查看此主题：Is it bad practice to comment out single lines of CSS with //?

除此之外，您的代码似乎工作正常（我假设您的JavaScript工作正常，因此我将class =“active”添加到您的某个li标签中。）

在下面的代码中，黑色边框显示在ul底部的正下方。如果要更改显示的位置，则只需更改元素的高度。

HTML：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <nav id="menu">
      <ul>  
          <li class="active"><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/

试图给我的导航菜单项边框底部

4 个答案: