如何製作邊框底部動畫和忽略填充

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