为什么在我将它设置为 inline-block 后 li 在图像下方移动？

Question

我正在尝试创建一个导航栏，但我不知道为什么我会遇到这个问题：尝试将 ul 中的 li 设置为 inline-block 有效，但它会将整个列表移动到我用作徽标的图像下方。有人可以解释为什么会发生这种情况以及如何解决吗？ https://codepen.io/rou-teodor/pen/QWNrVNZ

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: black;
}

img {
  display: inline-block;
  width: 100%;
  height: auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.logo {
  width: 150px;
  position: center;
  display: inline-block;
}

#nav-bar {
  background-color: yellow;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

#nav-bar li {
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header id="header">
      <nav id="nav-bar">
        <img src="https://lh3.googleusercontent.com/proxy/Gyq8iOFxCVu1elwlR_1-GxK3u-TUWFFlOQSqrfDZgAHetn8z2IwFTVlfxbFKi22xFMo50VuCSigKfek8gVmIspvxC-TIr0Ve0a5eke9v72M3k9xkxmhrsdxYpiqgnFm6Sg" alt="" class="logo" />
        <ul>
          <li class="nav-link"><a href="#">acasa</a></li>
          <li class="nav-link"><a href="#">despre</a></li>
          <li class="nav-link"><a href="#">produse</a></li>
          <li class="nav-link"><a href="#">cumpara</a></li>
        </ul>
      </nav>
      <img src="cover.jpeg" alt="" id="header-img" />
      <p></p>
    </header>

    <section class="products">
      <div class="product1"></div>
      <div class="product2"></div>
      <div class="product3"></div>
    </section>

    <div class="form">
      <!-- Formular cumparare -->
    </div>
  </body>
</html>

Answer 1

添加 display: flex;align-items: center; 以垂直居中导航栏:)

#nav-bar {
    background-color: yellow;
    display: flex;
    align-items: center;
}

Answer 2

导航栏不在徽标下方，它就在同一行上。它看起来的原因是徽标图像非常高（select 在浏览器工具中可以看到）

要使导航栏垂直居中于徽标，您可以将 display: flex; 和 align-items: center; 添加到 #nav-bar

的 CSS 规则中

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: black;
}

img {
  display: inline-block;
  width: 100%;
  height: auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.logo {
  width: 150px;
  position: center;
  display: inline-block;
}

#nav-bar {
  background-color: yellow;
  display: flex;
  align-items: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

#nav-bar li {
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header id="header">
    <nav id="nav-bar">
      <img src="https://lh3.googleusercontent.com/proxy/Gyq8iOFxCVu1elwlR_1-GxK3u-TUWFFlOQSqrfDZgAHetn8z2IwFTVlfxbFKi22xFMo50VuCSigKfek8gVmIspvxC-TIr0Ve0a5eke9v72M3k9xkxmhrsdxYpiqgnFm6Sg" alt="" class="logo" />
      <ul>
        <li class="nav-link"><a href="#">acasa</a></li>
        <li class="nav-link"><a href="#">despre</a></li>
        <li class="nav-link"><a href="#">produse</a></li>
        <li class="nav-link"><a href="#">cumpara</a></li>
      </ul>
    </nav>
    <img src="cover.jpeg" alt="" id="header-img" />
    <p></p>
  </header>

  <section class="products">
    <div class="product1"></div>
    <div class="product2"></div>
    <div class="product3"></div>
  </section>

  <div class="form">
    <!-- Formular cumparare -->
  </div>
</body>

</html>

为什么在我将它设置为 inline-block 后 li 在图像下方移动？

Why is the li moving below the image after i set it to inline-block?

html

css

navbar

nav