border-bottom dropped whole div

好吧，所以問題是這樣的，當我把鼠標懸停在li上時：我的整個div將會下降一點，然後在我完成懸停後再回來。我只是試圖設置它，所以它只會顯示邊框底部不失整個DIV有些低落border-bottom dropped whole div

<div id="header_left"> 
       <ul> 
        <li><a class="active" href="#home">Home</a></li> 
        <li><a href="#news">News</a></li> 
        <li><a href="#contact">Contact</a></li> 
        <li><a href="#about">About</a></li> 
       </ul> 
      </div>

和CSS配置

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

li a { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover { 
    border-bottom: 2px solid green; 
}

來源

2016-09-24 Senior Gamer

沒關係，修復。我必須增加div的大小 –

只需添加一個透明的邊框給無徘徊你的元素的狀態。

這樣的：

li a { 
border-bottom: 2px solid transparent; 
}

這將有助於得到懸停擺脫顛簸的。

來源

2016-09-24 16:57:32

如果您試圖讓單個菜單項懸停在底部顯示邊框，那麼您可能需要爲每個菜單項設置一個ID並指定它在懸停時在css中執行的操作。因爲它是正確的，你的目標是一切，這就是爲什麼整個事情都在盤旋。它很簡單，只需要更多的代碼。

來源

2016-09-24 17:10:18 sammyb123

始終將「盒子大小：邊界盒」，包括盒模型
設置默認透明邊框內邊框和填充和懸停

* { 
 
    box-sizing: border-box; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    border-bottom: 2px solid transparent; 
 
} 
 

 
li a:hover { 
 
    border-color: green; 
 
}

<div id="header_left"> 
 
    <ul> 
 
     <li><a class="active" href="#home">Home</a></li> 
 
     <li><a href="#news">News</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><a href="#about">About</a></li> 
 
    </ul> 
 
</div>

只改變顏色

來源

2016-09-25 12:43:47

border-bottom dropped whole div

回答

相關問題