當我給他們一個內在邊界時，爲什麼我的元素會移動？

Question

我用下面的代碼獲取我的導航hover效果：當我將鼠標懸停他們移動li元素fiddle link

。我怎樣才能避免這種情況？ 我試圖給li元素一個白色的邊框，但是現在元素不再是垂直居中了。

Answer 1

在li標記中使用透明邊框。

header img { 
 
    width: 59px; 
 
    height: 32px; 
 
    float: left; 
 
} 
 

 
nav { 
 
    float: right; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    font-family: 'Roboto Condensed', sans-serif; 
 
    font-weight: 400; 
 
    font-size: 1em; 
 
    height: 90px; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    border-top: 8px solid rgba(0, 0, 0,0); 
 
} 
 

 
nav li:not(:last-child) { 
 
    margin: 0px 40px 0px 0px; 
 
} 
 

 
nav ul li:hover { 
 
    border-color: rgb(109, 155, 166); 
 
    cursor: pointer; 
 
} 
 

 
nav ul li a { 
 
    text-decoration: none; 
 
    color: rgb(62, 74, 89); 
 
    height: 100%; 
 
    display: block; 
 
} 
 

 
header { 
 
    max-width: 960px; 
 
    height: 90px; 
 
    margin: 0 auto; 
 
    line-height: 90px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
}

<header> 
 

 
    <img src="images/logo.png" alt="BW"> 
 

 
    <nav> 
 
    <ul> 
 
     <li><a href="google.de">Start</a></li> 
 
     <li><a href="#">&Uuml;ber mich</a></li> 
 
     <li><a href="#">Pakete</a></li> 
 
     <li><a href="#">Portfolio</a></li> 
 
     <li><a href="#">Kontakt</a></li> 
 
    </ul> 
 
    </nav> 
 

 
</header>

Answer 2

添加懸停改變邊界爲元素的內容，所以你應該爲你提供的css絲毫透明邊框時不叮無縫的

nav ul li { 
    border-top:8px solid transparent; 
    display: inline-block; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-weight: 400; 
    font-size: 1em; 
    height: 90px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Answer 3

很明顯，他們在移動。首先你沒有邊框，所以它們在頂部，當你將它懸停時，你有一個8px的邊框，所以它們向下運行8px。

該解決方案很簡單。您必須在開始時向您的li添加透明邊框。

nav ul li { 
    border-top: 8px solid rgba(0, 0, 0,0); 
} 

或

nav ul li { 
    border-top: 8px transparent; 
} 

這兩種解決方案是可能的，但不是每一個（舊）瀏覽器接受的透明標籤。

Answer 4

你可以試試這個代碼...

nav ul li { 
    display: inline-block; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-weight: 400; 
    font-size: 1em; 
    height: 90px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    position: relative; 
} 

nav ul li:hover::before { 
    /* border-top: 8px solid rgb(109, 155, 166); */ 
    content: ""; 
    display: inline-block; 
    width: 50px; 
    height: 8px; 
    position: absolute; 
    top: 0; 
    background-color: rgb(109, 155, 166); 
}