導航欄中的按鈕下不需要的間距

我的問題是，當將鼠標懸停在導航欄上時，懸停顏色不能完全覆蓋整個項目。我該如何解決這個問題？這是由於我的標誌嗎？

Like so...

我的html代碼：

.navigation { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: rgb(134, 35, 35); 
 
    font-family: Megrim, cursive; 
 
    font-weight: bold; 
 
} 
 

 

 
/* floats navigation buttons to the right */ 
 

 
.naviright { 
 
    float: right; 
 
} 
 

 

 
/*makes elements start from the left*/ 
 

 
.navigation li { 
 
    float: left; 
 
} 
 

 
.navigation li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
} 
 

 

 
/* Change the link color to #111 (black) on hover */ 
 

 
.navigation li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 

 
.navigation li a:hover:active { 
 
    background-color: #4CAF50; 
 
} 
 

 

 
/*TopNav End*/ 
 

 

 
/*logo*/ 
 

 
#logo { 
 
    width: 40px; 
 
    height: 40px; 
 
    overflow: hidden; 
 
    padding-left: 20px; 
 
    padding-bottom: 5px; 
 
    padding-top: 2px; 
 
} 
 

 
#logoname { 
 
    color: rgb(255, 255, 255); 
 
    font-size: 20px; 
 
}

<nav> 
 
    <ul class="navigation"> 
 
    <li id="logo"><img src="images\logo.svg"></li> 
 
    <li id="logoname"><a>Stationery Haven</a></li> 
 
    <div class="naviright"> 
 
     <li><a href="index3.html">Home</a></li> 
 
     <li><a href="#">Categories</a></li> 
 
     <li><a href="#">Feedback</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
    </div>`enter code here` 
 
    </ul> 
 
</nav>

來源

2017-11-18 Arcghost

這是正確的。你的圖像填充/餘量使空間 – mplungjan

好吧，謝謝！我會去看看它:) – Arcghost

可以創建jsfiddle嗎？首先確保導航高度不超過鏈接項目高度，這是由於徽標。假設如果你的導航高度是40px，但是你的鏈接項目高度是38px，那麼它應該發生。另一點是確保ul，li或鏈接本身沒有底部填充邊距。 – Hanif

添加行高爲LI

.navigation li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 12px 16px; 
    text-decoration: none; 
    line-height:22px; 
}

.navigation { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: rgb(134, 35, 35); 
 
    font-family: Megrim, cursive; 
 
    font-weight: bold; 
 
} 
 

 

 
/* floats navigation buttons to the right */ 
 

 
.naviright { 
 
    float: right; 
 
} 
 

 

 
/*makes elements start from the left*/ 
 

 
.navigation li { 
 
    float: left; 
 
} 
 

 
.navigation li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    line-height:22px; 
 
} 
 

 

 
/* Change the link color to #111 (black) on hover */ 
 

 
.navigation li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 

 
.navigation li a:hover:active { 
 
    background-color: #4CAF50; 
 
} 
 

 

 
/*TopNav End*/ 
 

 

 
/*logo*/ 
 

 
#logo { 
 
    width: 40px; 
 
    height: 40px; 
 
    overflow: hidden; 
 
    padding-left: 20px; 
 
    padding-bottom: 5px; 
 
    padding-top: 2px; 
 
} 
 

 
#logoname { 
 
    color: rgb(255, 255, 255); 
 
    font-size: 20px; 
 
}

<nav> 
 
    <ul class="navigation"> 
 
    <li id="logo"><img src="images\logo.svg"></li> 
 
    <li id="logoname"><a>Stationery Haven</a></li> 
 
    <div class="naviright"> 
 
     <li><a href="index3.html">Home</a></li> 
 
     <li><a href="#">Categories</a></li> 
 
     <li><a href="#">Feedback</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
    </div>`enter code here` 
 
    </ul> 
 
</nav>

來源

2017-11-18 08:19:10 Gattbha

OK我查看了您的代碼，我想如果您添加或更改下面的CSS代碼，然後它會爲你工作：

#logo { 
width: 40px; 
height: 40px; 
overflow: hidden; 
padding-left: 20px; 
padding-bottom: 4px; // Changed here 5px to 4px 
padding-top: 2px; 
} 

.navigation li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 12px 16px; 
    line-height: 22px; // Logo test font-size: 20px; so this line need to be added 
    text-decoration: none; 
}

來源

2017-11-18 08:57:07 Hanif

1）你可以通過增加

大小解決這個問題

.naviright li a {font-size: 20px;}

2），或者你可以只給行高度 -

.navigation li a {line-height: 22px;}

這裏是基於Flex的解決方案，我已經試過Fiddle

來源

2017-11-18 09:56:29

導航欄中的按鈕下不需要的間距

回答

相關問題