html - 使用 flexbox 使图像和 Div 的大小相同

Question

我知道这可能是一个基本问题，但到目前为止我还无法通过谷歌解决它:

我想要一个带有图像( Logo )和右侧 3 个链接的导航栏。我希望它们都具有相同的高度并且处于相同的高度，有点像这样:

然而我所做的就是让它看起来像这样:

#nav-bar {
  position: fixed;
  top: 0px;
  width: 100%;
  background: #b7b7b7;
  border: 1px #4c4c4c solid;
  padding: 1em;
}

#flex {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  align-content: center;
}

img {
  margin-top: 20px;
  height: auto;
  width: 15%;
}

.nav-link {
  border: 1px solid #4c4c4c;
  padding: 0.5em;
  background-color: #b7b7b7;
  color: black;
  text-decoration: none;
}

<nav id="nav-bar">
  <div id="flex">
    <div><img src="https://i.pinimg.com/originals/58/c8/82/58c88275c1a3389a7260baf05bf34e9a.jpg" alt="violin logo" id="header-img"></div>
    <a href="#products" class="nav-link">Products</a>
    <a href="#video" class="nav-link">Demo</a>
    <a href="#newsletter" class="nav-link">Newsletter</a>
  </div>
</nav>

Answer 1

也许是这样的:

#nav-bar {
  position: fixed;
  top: 0px;
  width: 100%;
  background: #b7b7b7;
  border: 1px #4c4c4c solid;
  padding: 1em; 
}

#flex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;
}

img {
  height: 50px;
  width: auto;
}

.nav-links {
  padding-right: 50px;
}

.nav-links .nav-link {
  border: 1px solid #4c4c4c;
  background-color: #b7b7b7;
  color: black;
  height: 50px;
  display: inline-block;
  text-decoration: none;
}

 <nav id="nav-bar">
  <div id="flex">
  <img src="https://i.pinimg.com/originals/58/c8/82/58c88275c1a3389a7260baf05bf34e9a.jpg" alt="violin logo" id="header-img">
  <div class="nav-links">
    <a href="#products" class="nav-link">Products</a>
    <a href="#video" class="nav-link">Demo</a>
    <a href="#newsletter" class="nav-link">Newsletter</a>
  </div>
  </div>
</nav>

只需将链接包装到一个 div 中，然后将 justify-content 设置为 'space-between' 并设置图像和带链接的 div 的高度相同。希望对你有帮助