Html 尝试为我的导航菜单项提供边框底部

我试图给我的

ulli设置一个边框底部，这是单击菜单项时出现的一个
菜单元素

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

有人能帮我理解发生了什么吗

我的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>

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

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

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

我的JSFIDLE:

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

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

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

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

只需添加
框大小
：

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

只需添加
框大小
：

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

将边界设置为锚点。锚只会占据其内部/周围任何元素的空间，
因此，将边框设置为锚点就像将其设置为
本身

您应该在锚定中用一个span包装文本，该span占用文本的空间并将边框设置为span

以下是一个例子：

将边框设置为锚点。锚只会占据其内部/周围任何元素的空间，
因此，将边框设置为锚点就像将其设置为
本身

您应该在锚定中用一个span包装文本，该span占用文本的空间并将边框设置为span

以下是一个例子：

我不确定您的JSFIDLE是否准确地表示了您的问题，但无论如何，我会在此基础上提出解决方案

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

请参阅堆栈溢出上的此线程：

除此之外，您的代码似乎工作正常（我假设您的JavaScript工作正常，所以我在您的一个li标记中添加了class=“active”）


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

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>

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

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

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

JSFIDLE:

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

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

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

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

我不确定您的JSFIDLE是否准确地表示了您的问题，但无论如何，我会在此基础上提出解决方案

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

请参阅堆栈溢出上的此线程：

除此之外，您的代码似乎工作正常（我假设您的JavaScript工作正常，所以我在您的一个li标记中添加了class=“active”）


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

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>

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

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

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

JSFIDLE:

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

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

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

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

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

要解决此问题，只需删除行
display:blocka
标记编写code>。您根本不需要这些，删除将解决您的问题：

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

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

要解决此问题，只需删除行
display:blocka
标记编写code>。您根本不需要这些，删除将解决您的问题：

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

谢谢你的回答和解释！它就像我想要的那样工作！：）顺便问一下，你知道有没有可能给我的底边换个颜色？因为我想要小一点的@你说的更小是什么意思？底部边框太长？是的，将我的边框底部的宽度更改为较小的宽度。我的想法是在活动菜单项下画一个小圆圈，但我无法想象它是如何用CSS画一个圆圈的，我试图用CSS制作一个边框底部，但边框底部要比默认的边框底部小。@CesarM我无法想象你的圆圈在链接文本下的样子，但如果只是为了缩短边框，我认为这是可能的，它需要更多的css调整。谢谢你的回答和解释！它就像我想要的那样工作！：）顺便问一下，你知道有没有可能给我的底边换个颜色？因为我想要小一点的@你说的更小是什么意思？底部边框太长？是的，将我的边框底部的宽度更改为较小的宽度。我的想法是在活动菜单项下画一个小圆圈，但我无法想象如何用CSS画一个圆圈