为什么我的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项目不能垂直拉伸？

回答

相关问题