橫幅圖像中的白色盒子

Question

我想在我的固定導航欄上添加一個2px的邊框頂部，但是在href懸停時，它將所有導航項目向下推動2px，我試圖讓它成爲靜態，任何幫助表示讚賞。

 .fixed-nav-bar { 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
     right: 0; 
 
     z-index: 9999; 
 
     width: 100%; 
 
     height: 70px; 
 
     background-color: #3f3f3f; 
 
    } 
 
    
 
    .fixed-nav-bar li, .fixed-nav-bar a { 
 
    height: 0 auto; 
 
     line-height: 50px; 
 
     width: 100px; 
 
     overflow: hidden; 
 
    } 
 
    .menu { 
 
     width: 90%; 
 
     max-width: 960px; 
 
     margin: 0 auto; 
 
     text-align: center; 
 
    } 
 
    .menu a, .menu a:visited { 
 
     color: #ffffff; 
 
     overflow: hidden; 
 
    } 
 
    .menu a:hover, .menu a:target { 
 
    display: block; 
 
    border-top: 2px solid #72BCD4; 
 
    color: #72BCD4; 
 
    } 
 
    
 
    .menu-items { display: inline-block; } 
 
    
 
    
 
    .menu-items li { 
 
     display: inline-block; 
 
     margin-right: 10px; 
 
     margin-left: 10px; 
 
    } 
 
    .menu-items a { 
 
     text-decoration: none; 
 
    } 
 
    
 
    .show, .hide { 
 
     display: none; 
 
     padding-left: 15px; 
 
     background-color: transparent; 
 
     background-repeat: no-repeat; 
 
     background-position: center left; 
 
     color: #dde1e2; 
 
    } 
 
    .show { 
 
     background-image: url(../assets/down-arrow-icon.png); 
 
    } 
 
    .hide { 
 
     background-image: url(../assets/up-arrow-icon.png); 
 
    }

 <nav class="fixed-nav-bar"> 
 
      <div id="menu" class="menu"> 
 
       <!-- Example responsive navigation menu --> 
 
       <a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a> 
 
       <ul class="menu-items"> 
 
       <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">HOME</a></li> 
 
       <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">ABOUT</a></li> 
 
       <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">DESIGNS</a></li> 
 
       <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">CONTACT</a></li> 
 
      </ul> 
 
      </div> 
 
      </nav>

Answer 1

這是因爲沒有邊界的。請給出具有相同寬度的透明邊框或使用邊框的顏色。但在你的情況下，這是搞砸了。所以我改變了overflow: hidden和使用margin-top: -2px：

.fixed-nav-bar { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 9999; 
 
    width: 100%; 
 
    height: 70px; 
 
    background-color: #3f3f3f; 
 
} 
 

 
.fixed-nav-bar li, .fixed-nav-bar a { 
 
    height: 0 auto; 
 
    line-height: 50px; 
 
    width: 100px; 
 
} 
 
.menu { 
 
    width: 90%; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.menu a, .menu a:visited { 
 
    color: #ffffff; 
 
} 
 
.menu a:hover, .menu a:target { 
 
    display: block; 
 
    border-top: 2px solid #72BCD4; 
 
    color: #72BCD4; 
 
    margin-top: -2px; 
 
} 
 

 
.menu-items { 
 
    display: inline-block; 
 
} 
 

 
.menu-items li { 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
} 
 
.menu-items a { 
 
    text-decoration: none; 
 
} 
 

 
.show, .hide { 
 
    display: none; 
 
    padding-left: 15px; 
 
    background-color: transparent; 
 
    background-repeat: no-repeat; 
 
    background-position: center left; 
 
    color: #dde1e2; 
 
} 
 
.show { 
 
    background-image: url(../assets/down-arrow-icon.png); 
 
} 
 
.hide { 
 
    background-image: url(../assets/up-arrow-icon.png); 
 
}

<nav class="fixed-nav-bar"> 
 
    <div id="menu" class="menu"> 
 
    <!-- Example responsive navigation menu --> 
 
    <a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a> 
 
    <ul class="menu-items"> 
 
     <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">HOME</a></li> 
 
     <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">ABOUT</a></li> 
 
     <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">DESIGNS</a></li> 
 
     <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">CONTACT</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

Answer 2

這都是因爲box-sizing財產。默認情況下，它會在內容區域之外添加填充/邊距/邊框的值，所以元素會變大。只需定義全局* {box-sizing: border-box;}它將使元素具有固定的大小。這意味着如果元素沒有邊框，然後它添加，元素的內容區域將更小，但整個大小將是相同的。不過，我強烈建議你在開始時使用邊框，否則它會跳到元素內部。您可以將顏色設置爲「透明」，並且不會顯示。然後只需更改邊框顏色就會更好。

Answer 3

我創建了一個小提琴手：

https://jsfiddle.net/marco_rensch/0hva2241/

這可能是一個可行的解決方案 結賬排31和51

關鍵是添加默認邊框2px的透明之間的CSS代碼更改到李的和改變它懸停：

.menu-items li:hover{border-top: 2px solid #72BCD4;}