爲什麼我的flex項目不能垂直拉伸？

我試圖做一個導航欄，但不是所有的<li>垂直拉伸。目前只有<li>與<h1>垂直完全拉伸在容器內部，但左側仍有空白。剩下的<li>上面和下面都有空格。我如何讓它們伸展以獲取所有垂直空間（居中）？爲什麼我的flex項目不能垂直拉伸？

Image of the navbar

body, h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
header { 
 
    max-width: 760px; 
 
    margin: 0 auto; 
 
    
 
} 
 
header ul { 
 
    display: flex; 
 
    border: 5px solid black; 
 
    align-items: baseline; 
 
} 
 

 
header ul li { 
 
    background-color: bisque; 
 
    flex: 1; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    border: 3px solid orange; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Jenga Home</title> 
 
    <link rel="stylesheet" href="styles.css" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <ul> 
 
     <li> 
 
     <h1>homepagio</h1> 
 
     </li> 
 
     <li> 
 
     Home 
 
     </li> 
 
     <li> 
 
     Werk 
 
     </li> 
 
     <li> 
 
     Contact 
 
     </li> 
 
     <li> 
 
     Disclaimer 
 
     </li> 
 
    </ul> 
 
    </header> 
 
    <section> 
 
    </section> 
 
    <footer> 
 
    </footer> 
 
</body> 
 

 
</html>

來源

2016-08-13 Rolam

body, h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
header { 
 
    max-width: 760px; 
 
    margin: 0 auto; 
 
    
 
} 
 
header ul { 
 
    display: flex; 
 
    border: 5px solid black; 
 
    align-items: stetch; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header ul li { 
 
    background-color: bisque; 
 
    flex: 1; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    border: 3px solid orange; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Jenga Home</title> 
 
    <link rel="stylesheet" href="styles.css" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <ul> 
 
     <li> 
 
     <h1>homepagio</h1> 
 
     </li> 
 
     <li> 
 
     Home 
 
     </li> 
 
     <li> 
 
     Werk 
 
     </li> 
 
     <li> 
 
     Contact 
 
     </li> 
 
     <li> 
 
     Disclaimer 
 
     </li> 
 
    </ul> 
 
    </header> 
 
    <section> 
 
    </section> 
 
    <footer> 
 
    </footer> 
 
</body> 
 

 
</html>

來源

2016-08-13 07:50:12

謝謝！看起來更好。 h1還有空白，這是什麼？我沒有保證金。 – Rolam

已編輯。嘗試。也許它應該幫助你。隊友的歡呼聲！ – 2016-08-13 07:57:30

爲什麼我的flex項目不能垂直拉伸？

回答

相關問題