Hyrule Hyrule - 3 months ago 12
CSS Question

Why my flex items don't stretch vertically?

I'm trying to make a navbar, but not all my

<li>
stretch vertically. Currently only the
<li>
with
<h1>
is fully stretched vertically inside the container but there is white space to the left of it somehow though. The remaining
<li>
have white space above and below them. How do i make them stretch to take all vertical space (centered)?

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>




Answer

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>

Comments