html - 为什么我的 li 元素在我给它们一个内边框时会移动？

Question

我使用以下代码在我的导航中获得悬停效果:fiddle link

当我将鼠标悬停在 li 元素上时，它们正在移动。我怎样才能避免这种情况？ 我试图给 li 元素一个白色边框，但这些元素现在不再垂直居中了。

Answer 1

在li标签中使用透明边框。

header img {
  width: 59px;
  height: 32px;
  float: left;
}

nav {
  float: right;
}

nav ul li {
  display: inline-block;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 1em;
  height: 90px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 8px solid rgba(0, 0, 0,0);
}

nav li:not(:last-child) {
  margin: 0px 40px 0px 0px;
}

nav ul li:hover {
  border-color: rgb(109, 155, 166);
  cursor: pointer;
}

nav ul li a {
  text-decoration: none;
  color: rgb(62, 74, 89);
  height: 100%;
  display: block;
}

header {
  max-width: 960px;
  height: 90px;
  margin: 0 auto;
  line-height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<header>

  <img src="images/logo.png" alt="BW">

  <nav>
    <ul>
      <li><a href="google.de">Start</a></li>
      <li><a href="#">&Uuml;ber mich</a></li>
      <li><a href="#">Pakete</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </nav>

</header>