HTML/CSS幫助讓鏈接懸停填充整個導航欄

當我們將鼠標懸停在鏈接上時，我試圖讓導航欄完全突出顯示，但它目前只能水平工作。我認爲它的確很小，我做錯了，並且已經嘗試了四個小時。繼承人的代碼，我有：HTML/CSS幫助讓鏈接懸停填充整個導航欄

html, body { 
 
    
 
    /*require html and body 100% height and width to allow other child elements to use percentages*/ 
 
    
 
    \t height: 100%; 
 
    \t width: 100%; 
 
    \t margin: 0; 
 
    
 
    } 
 
    
 
    a { 
 
    \t text-decoration: none; 
 
    \t display: block; 
 
    \t color: black; 
 
    } 
 
    
 
    li { 
 
    \t list-style: none; 
 
    } 
 
    
 
    
 
    div{ 
 
    \t margin-left: 2.5%; 
 
    \t margin-right: 2.5%; 
 
    \t margin-top: 1%; 
 
    \t border: 1px solid black; 
 
    } 
 
    
 
    .content_section{ 
 
    \t height: 150%; 
 
    \t margin-bottom: 1%; 
 
    } 
 
    
 
    #footer{ 
 
    \t height: 25%; 
 
    \t margin-bottom: 1%; 
 
    } 
 
    
 
    #banner{ 
 
    \t margin-top: 2.5%; 
 
    \t height: 15%; 
 
    \t position: relative; 
 
    } 
 
    
 
    #banner img{ 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    } 
 
    
 
    #navbar{ 
 
    \t padding: 0; 
 
    \t height: 5%; 
 
    \t 
 

 
    text-align: center; 
 
    \t position: relative; 
 
    \t background-color: #FFCB3D; 
 
    } 
 

 
    #navbar li a { 
 
    \t display: block; 
 
     text-align: center; 
 
     text-decoration: none; 
 
     width: 20%; 
 
     height: 100%; 
 
     float: left; 
 
    } 
 
    
 
    #navbar ul a:hover{ 
 
    \t height: 100%; 
 
    \t background-color: #FFF17C; 
 
    }

<!DOCTYPE html> 
 
<html> 
 

 
\t <head> 
 
\t \t <title>Sample Site</title> 
 
\t \t <link rel="stylesheet" type="text/css" href="css.css"> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <div id="banner"> 
 
\t \t \t <img src="resources/images/banner-image.png"> \t \t 
 
\t \t </div> 
 

 
\t \t <div id="navbar"> 
 
\t \t \t <ul id="navbar"> 
 
\t \t \t \t <li><a href="#">Page A</a></li> 
 
\t \t \t \t <li><a href="#">Page B</a></li> 
 
\t \t \t \t <li><a href="#">Page C</a></li> 
 
\t \t \t \t <li><a href="#">Page D</a></li> 
 
\t \t \t \t <li><a href="#">Page E</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 

 
\t \t <div class="content_section"> 
 
\t \t </div> 
 

 
\t \t <div id="footer"> 
 
\t \t </div> 
 
\t </body> 
 
</html>

來源

2017-06-21 M Moug

我會做的ul一個display: flex父創建行了li的，去掉對#navbar的height所以它是基於內容液，請刪除ul的默認margin，然後在li（或簡稱爲flex: 1 0 0）上設置flex-grow: 1，這樣它們將拉伸以均勻填充父級，然後應用垂直padding t輸入li > a並刪除height和float s。

html, body { 
 
    
 
    /*require html and body 100% height and width to allow other child elements to use percentages*/ 
 
    
 
    \t height: 100%; 
 
    \t width: 100%; 
 
    \t margin: 0; 
 
    
 
    } 
 
    
 
    a { 
 
    \t text-decoration: none; 
 
    \t display: block; 
 
    \t color: black; 
 
    } 
 
    
 
    li { 
 
    \t list-style: none; 
 
    } 
 
    
 
    
 
    div{ 
 
    \t margin-left: 2.5%; 
 
    \t margin-right: 2.5%; 
 
    \t margin-top: 1%; 
 
    \t border: 1px solid black; 
 
    } 
 
    
 
    .content_section{ 
 
    \t height: 150%; 
 
    \t margin-bottom: 1%; 
 
    } 
 
    
 
    #footer{ 
 
    \t height: 25%; 
 
    \t margin-bottom: 1%; 
 
    } 
 
    
 
    #banner{ 
 
    \t margin-top: 2.5%; 
 
    \t height: 15%; 
 
    \t position: relative; 
 
    } 
 
    
 
    #banner img{ 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    } 
 
    
 
    #navbar{ 
 
    \t padding: 0;   
 
    \t position: relative; 
 
    \t background-color: #FFCB3D; 
 
     text-align: center; 
 
    } 
 
    ul#navbar { 
 
     display: flex; 
 
     margin: 0; 
 
    } 
 
    #navbar li { 
 
     flex: 1 0 0; 
 
    } 
 

 
    #navbar li a { 
 
    \t display: block; 
 
     text-decoration: none; 
 
     padding: 1em 0; 
 
    } 
 
    
 
    #navbar ul a:hover{ 
 
    \t background-color: #FFF17C; 
 
    }

<!DOCTYPE html> 
 
<html> 
 

 
\t <head> 
 
\t \t <title>Sample Site</title> 
 
\t \t <link rel="stylesheet" type="text/css" href="css.css"> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <div id="banner"> 
 
\t \t \t <img src="resources/images/banner-image.png"> \t \t 
 
\t \t </div> 
 

 
\t \t <div id="navbar"> 
 
\t \t \t <ul id="navbar"> 
 
\t \t \t \t <li><a href="#">Page A</a></li> 
 
\t \t \t \t <li><a href="#">Page B</a></li> 
 
\t \t \t \t <li><a href="#">Page C</a></li> 
 
\t \t \t \t <li><a href="#">Page D</a></li> 
 
\t \t \t \t <li><a href="#">Page E</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 

 
\t \t <div class="content_section"> 
 
\t \t </div> 
 

 
\t \t <div id="footer"> 
 
\t \t </div> 
 
\t </body> 
 
</html>

來源

2017-06-21 18:02:22

非常感謝你 –

@MMoug歡迎您:) –

HTML/CSS幫助讓鏈接懸停填充整個導航欄

回答

相關問題