在悬停时，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。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 2

在display:block中添加.navigation li:hover。