Question

我试图制作一个导航栏，但不是我的所有<li>都垂直伸展。目前只有<li> <h1>与<li>在容器内部完全垂直拉伸，但是在它的左边有一些空白区域。剩下的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; }在其上方和下方都有空白区域。如何让它们伸展以占据所有垂直空间（居中）？

Image of the navbar

＆＃13;

<!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>

＆＃13;

{{1}}

＆＃13;

Answer 1

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>

为什么我的柔性物品不能垂直伸展？

1 个答案: