如何使影像的大小與導航按鈕相同？-有解無憂

我設計了一個導航欄，它也需要有一個標志，問題是影像比導航按鈕大。當將滑鼠懸停在如下圖所示的專案上時，這也是可見的。

如何使影像的大小與導航按鈕相同？

我該如何解決這個問題？

.navigation ul {
  margin: 0;
}

.navigation li {
  display: inline;
}

.navigation img {
  max-width: 4ch;
}

.navigation a {
  display: inline-block;
  padding: .8em;
  color: white;
  text-decoration: none;
}

.main-navigation {
  text-align: left;
}

.navigation a:hover {
  background-color: rgba(255, 255, 255, 0.301);
  color: black;
}

.nav-header {
  background-color: rgba(0, 0, 0, .4);
  background-image: url("Images/navbg.jpg");
  background-blend-mode: multiply;
  background-size: cover;
  padding-bottom: 30px;
}

<header class="nav-header">
  <nav class="navigation main-navigation">
    <ul>
      <li>
        <a href="index.html" target="_self"><img src="https://via.placeholder.com/60" class="logo-ic"></a>
        <</li>
          <li><a href="index.html" target="_self">HOME</a></li>
          <li><a href="applications.html" target="_self">APPLICATIONS</a></li>
          <li><a href="about.html" target="_self">ABOUT</a></li>
    </ul>
  </nav>
</header>

uj5u.com熱心網友回復：

現在通常的解決方案是使用子元素居中對齊的 flex 布局。還可以根據需要從徽標錨元素上取下填充或調整大小。

請參閱https://css-tricks.com/snippets/css/a-guide-to-flexbox。

.navigation ul {
  display: flex;
  align-items: center;
  margin: 0;
}

.navigation li {
  display: inline;
}

.navigation img {
  max-width: 4ch;
}

.navigation a {
  display: inline-block;
  padding: .8em;
  color: white;
  text-decoration: none;
}

.main-navigation {
  text-align: left;
}

.navigation a:hover {
  background-color: rgba(255, 255, 255, 0.301);
  color: black;
}

.nav-header {
  background-color: rgba(0, 0, 0, .4);
  background-image: url("Images/navbg.jpg");
  background-blend-mode: multiply;
  background-size: cover;
  padding-bottom: 30px;
}

<header class="nav-header">
  <nav class="navigation main-navigation">
    <ul>
      <li class="logo">
        <a href="index.html" class="logo" target="_self"><img src="https://via.placeholder.com/40" class="logo-ic"></a>
      </li>
      <li><a href="index.html" target="_self">HOME</a></li>
      <li><a href="applications.html" target="_self">APPLICATIONS</a></li>
      <li><a href="about.html" target="_self">ABOUT</a></li>
    </ul>
  </nav>
</header>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/404698.html

標籤：

上一篇：PHP-在html表格中生成二維碼

下一篇：更新狀態問題