当我给它们一个内边框时，为什么我的 li 元素会移动？答案

【问题标题】：Why are my li elements moving when I give them an inner border?当我给它们一个内边框时，为什么我的 li 元素会移动？
【发布时间】：2016-12-22 18:40:48
【问题描述】：

我正在使用以下代码在我的导航中获得hover 效果：fiddle link

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

【问题讨论】：

使用透明边框jsfiddle.net/hkh82ot6/2

标签： html css hyperlink navigation

【解决方案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>

【讨论】：

【解决方案2】：

在悬停时添加边框会更改元素的内容，因此您应该在不悬停时为您提供 css whit 透明边框

nav ul li {
   border-top:8px  solid transparent;
   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;
}

【讨论】：

【解决方案3】：

很明显，他们正在移动。首先你没有边框，所以它们在顶部，当你悬停它时，你有一个 8px 的边框，所以它们向下运行 8px。

解决方法很简单。您必须在开始时为您的 li 添加一个透明边框。

nav ul li {
   border-top: 8px solid rgba(0, 0, 0,0);
}

或

nav ul li {
   border-top: 8px transparent;
}

这两种解决方案都是可能的，但不是每个（旧）浏览器都接受透明标签。

【讨论】：

【解决方案4】：

你可以试试这个代码...

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;
  position: relative;
}

nav ul li:hover::before {
  /* border-top: 8px solid rgb(109, 155, 166); */
  content: "";
  display: inline-block;
  width: 50px;
  height: 8px;
  position: absolute;
  top: 0;
  background-color: rgb(109, 155, 166);
}

【讨论】：