フレックスアイテムが縦に伸びないのはなぜですか？

私はnavbarを作ろうとしていますが、すべて私の<li>が縦に伸びているわけではありません。現在、<h1>の<li>のみが容器内で垂直に完全に伸びていますが、何とか左に空白があります。残りの<li>には、上下に空白があります。どのように私は彼らがすべての垂直方向のスペース（中央）を取るためにストレッチさせるのですか？フレックスアイテムが縦に伸びないのはなぜですか？

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

既に編集済みです。お試しください。多分それがあなたを助けるはずです。歓声メイト！ –

フレックスアイテムが縦に伸びないのはなぜですか？

答えて

関連する問題