使用 border-bottom 时防止 HTML/CSS-Navbar 改变高度

Question

我在导航栏上使用带有悬停效果的 border-bottom 时遇到了一个小问题。

有什么办法可以阻止吗？或者，比方说，给 Navbar 悬停时实际的高度？

我更喜欢不改变悬停高度的解决方案，但我对任何事情都持开放态度。

这是我的导航栏的 JSFiddle：https://jsfiddle.net/ay3u7trd/

谢谢！

Answer 1

为所有这些添加默认边框底部，并使其与背景颜色相同。

a {
  color: #ff8800;
  border-bottom: 3px solid #333;
}

a:hover {
  color: #ff8800;
  text-decoration: none;
  border-bottom-color: #1290FF;
}

Updated demo

更新 – 不要忘记更改活动元素的底部边框颜色

.active {
  border-bottom-color: #ff8800;
}

或者您将默认边框颜色设置为透明（可能是更好的解决方案）

a {
  color: #ff8800;
  border-bottom: 3px solid rgba(0,0,0,0);
}

Answer 2

将 border-bottom: 3px solid RGBA(0,0,0,0); 添加到您的 a { }。这将向所有超链接添加 3px 填充，而不应用特定颜色（将显示对象固有的背景颜色）。

然后一旦 :hover 效果发生，它就会显示在那里，因为边框已经存在，所以您没有奇怪的高度问题。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #121214;
  z-index: 10;
  text-transform: uppercase;
  
}

li {
  float: left;
  border-right: 1px solid #121214;
  text-decoration: none;
}

a {
  color: #ff8800;
  border-bottom: 3px solid RGBA(0,0,0,0);
}

a:hover {
  color: #ff8800;
  text-decoration: none;
  border-bottom: 3px solid #1290FF;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #ff8800;
  text-decoration: none;
  color: #121214;
  transition: background 0.3s ease-in;
}

.active {
  background-color: #ff8800;
  color: #121214;
  text-decoration: none;

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>

Answer 3

正确答案取决于您想要实现的用户体验。最简单的方法是将边框移动到 <a> 元素（或将悬停移动到 <li> 元素）。并在所有情况下使用 3px 边框——黑色表示非悬停，蓝色表示悬停。

像这样：https://jsfiddle.net/sh5a8v6y/

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  text-transform: uppercase;

}

li {
  float: left;
  border-right: 1px solid #121214;
  text-decoration: none;
}

a {
  color: #ff8800;
  border-bottom: 3px solid #121214;
}

a:hover {
  color: #ff8800;
  text-decoration: none;
  border-bottom: 3px solid #1290FF;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #ff8800;
  text-decoration: none;
  color: #121214;
  transition: background 0.3s ease-in;
}

.active {
  background-color: #ff8800;
  color: #121214;
  text-decoration: none;
}

Answer 4

a:hover {
  color: #ff8800;
  text-decoration: none;
  border-bottom: 3px solid #1290FF;
  padding-bottom:11px;
}

Fiddle

Answer 5

一种简单的方法是更改 ul 属性，如下所示：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #121214;
  z-index: 10;
  text-transform: uppercase;
  height: 48px;
}

使用 border-bottom 时防止 HTML/CSS-Navbar 改变高度

Prevent HTML/CSS-Navbar from changing height while using border-bottom

html

css

navbar

Updated demo