html - 悬停时，li 元素应占据容器的全部高度

Question

我想让 li 元素的高度与 header 的高度相同。

CodePen

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

header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  background: yellow;
  height: 7.5vh;
}

.navigation li {
  display: inline-block;
  padding: 0 1em;
}

.navigation li:hover {
  text-align: center;
  background-color: white;
}

<header>
  <h1>Logo</h1>

  <nav>
    <ul class="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Answer 1

实现此目的的一种方法是利用 line-height属性并使其与 height 相同你为你定义的 <header> :

.navigation li:hover {
  text-align: center;
  background-color: white;
  line-height: 7.5vh;
}

这是更新的 CodePen .希望这可以帮助!如果您有任何问题，请告诉我。