如何制作边框底部动画和忽略填充

Question

我正在试图制作一个带有边框底部的导航栏作为悬停效果，其目的是跟随用户鼠标悬停并突出显示该项目。然而，边界底部包括其父母的填充，我不喜欢。使用padding: 0px;不这样做。

这里就是我这么远，忍耐一下，因为我是相当新的HTML CSS &，这是我第一次拍网站：

*{ 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
} 
 
#navdiv ul { 
 
\t width: 100%; 
 
\t height: 80px; 
 
\t line-height: 80px; 
 
\t vertical-align: middle; 
 
\t background: #333; 
 
\t margin-top: 5px; 
 
} 
 
#container { 
 
\t margin-left: 200px; 
 
\t margin-right: 200px; 
 
} 
 
#navdiv ul a { 
 
\t width: 80%; 
 
\t text-decoration: none; 
 
\t color: #f2f2f2; 
 
\t padding: 15px; 
 
\t font-size: 16px; 
 
} 
 
#navdiv ul li { 
 
\t height: 63px; 
 
\t list-style-type: none; 
 
\t float: right; 
 
} 
 
#navdiv ul li:hover { 
 
\t border-bottom: 5px solid #FF9933; 
 
\t transition: all 0.3s ease-in-out; 
 
} 
 
#highlight { 
 
\t display: inline-block; 
 
\t line-height: 1em; 
 
\t padding: 0; 
 
\t border-bottom: 5px solid #FF9933; 
 
} 
 
#navdiv img { 
 
\t width: auto; 
 
\t height: auto; 
 
\t max-width: 100%; 
 
\t max-height: 60px; 
 
\t vertical-align: middle; 
 
}

<nav> 
 
    <div id="Maindiv"> 
 
    <div id="navdiv"> 
 
     <ul> 
 
     <div id="container"> 
 
      <a href="../index.html"><img src="../img/menu-logo.png" alt="Menu Logo"></a> 
 
      <li><a href="../item4/index.html">Item 4</a></li> 
 
      <li><a href="../item3/index.html">Item 3</a></li> 
 
      <li><a href="../item2/index.html">Item 2</a></li> 
 
      <li><a href="../item1/index.html" id="highlight">Item 1</a></li> 
 
     </div> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

由于你可以看到，橙色边框底部采用“Item 1”填充，使边框底部大于其内容，我觉得它很难看，我想修复它。

虽然在它，有没有办法让边界底部的动画从左到右？如果是这样，是否还有一种方法可以使其“足够聪明”，以知道如果用户的光标来自项目的左侧，则应该从“从左到右”进行动画制作，并且如果光标来自右侧，则将其从“从右到左”呢？

我也希望使它跟随用户光标，而不是在离开前一个项目后立即消失，并且在下一个项目悬停后立即出现。

对不起，很长的文章，我有这么多的问题，所以运气很差，同时用我知道的小知识进行故障排除。

非常感谢！ - 凯。

Answer 1

的原因边框看起来像，这是因为边界是围绕HTML元素的外部。填充位于元素内，因此边界将包含该边界，从而在该边界处进行边界处理。这个堆栈溢出问题用图解释了这一点： Difference between margin and padding?

您可能想要更改为使用余量来分隔项目。此外，宽度：80％也可能使边框看起来比您想象的长一点。您可以增加项目之间的边距，或者如果您确实希望项目的宽度为80％，则可以使用宽度为80％的父div，以免影响边框。

更多你在找什么？

*{ 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
} 
 

 
.slider { 
 
    position: absolute; 
 
    display:block; 
 
    left: 0; 
 
    top: 90%; 
 
    margin: 0 auto; 
 
    height: 2px; 
 
    width: 0%; 
 
    border-bottom: 5px solid #FF9933; 
 
    transition: width 1s ease; 
 
} 
 

 
#navdiv { 
 
    background: #333; 
 
} 
 

 
#navdiv ul { 
 
\t width: 100%; 
 
    display: inline; 
 
} 
 

 
#container { 
 
\t margin-left: 200px; 
 
\t margin-right: 200px; 
 
    height: 63px; 
 
    line-height: 63px; 
 
} 
 

 
#navdiv ul a { 
 
\t text-decoration: none; 
 
\t color: #f2f2f2; 
 
\t font-size: 16px; 
 
} 
 

 
#navdiv ul li { 
 
\t list-style-type: none; 
 
\t float: right; 
 
\t position:relative; 
 
    display:inline; 
 
    background-color: red; 
 
    line-height: 29px; 
 
    margin-top: 16px; 
 
    margin-right: 10px; 
 
} 
 

 
#navdiv ul li:hover .slider { 
 
\t border-bottom: 5px solid #FF9933; 
 
\t transition: all 0.3s ease-in-out; 
 
\t width: 100%; 
 
} 
 

 
#highlight { 
 
\t display: inline-block; 
 
\t line-height: 1em; 
 
\t padding: 0; 
 
\t border-bottom: 5px solid #FF9933; 
 
} 
 

 
#navdiv img { 
 
\t width: auto; 
 
\t max-width: 100%; 
 
}

<nav> 
 
    <div id="Maindiv"> 
 
    <div id="navdiv"> 
 
     <div id="container"> 
 
      <a href="../index.html"><img src="../img/menu-logo.png" alt="Menu Logo"></a> 
 
      <ul> 
 
      <li> 
 
       <a href="../blog/index.html">Item 5</a> 
 
       <span class="slider"></span> 
 
      </li> 
 
      <li> 
 
       <a href="../contactos/index.html">Item 4</a> 
 
       <span class="slider"></span> 
 
      </li> 
 
      <li> 
 
       <a href="../serviços/index.html">Item 3</a> 
 
       <span class="slider"></span> 
 
      </li> 
 
      <li> 
 
       <a href="../quem_somos/index.html">Item 2</a> 
 
       <span class="slider"></span> 
 
      </li> 
 
      <li id="highlight"> 
 
       <a href="../home/index.html">Item 1</a> 
 
       <span class="slider"></span> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 2

从#navdiv ul a中删除width: 80%;将修复较大的边框底部问题。

请从下方找到从左到右的边框效果。

https://codepen.io/julysfx/pen/qXBzYL