悬停时导航栏项目抖动

Question

我是学习网页设计的新手。我正在为我的实践创建一个示例网站。我被导航栏项目的问题卡住了。在列表项目上添加悬停效果后，当我悬停在项目上时，项目开始抖动。

这是我的代码：

<nav>
<div>
</div>
<ul>
<li><a>one</a></li>
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
</nav>

CSS样式：

nav {
display: flex;
justify-content: space-around;
flex-direction: row;
align-content: center;
align-items: center;
width: 100%;
background-color: #a33454;
}
nav div {
height: 60px;
width: 150px;
margin: 0.5rem;
}
nav ul {
display: flex;
list-style: none;
justify-content: space-between;
margin: 0.5rem;
align-items: center;
align-content: center;
}
nav ul li {
font-size: 1.3rem;
padding: 0.5rem;
margin: 0.2rem 0.6rem;
}
nav ul li:hover{
border-bottom: 4px solid #022222;
}

我还创建了一个沙盒演示

Answer 1

这是由于悬停时出现的border-bottom。这使高度增加了4倍。

最好的办法是在不悬停的状态下设置边界，但使其不可见。

nav ul li {
font-size: 1.3rem;
padding: 0.5rem;
margin: 0.2rem 0.6rem;
border-bottom: 4px solid transparent;
}
nav ul li:hover{
border-bottom: 4px solid #022222;
}

通过将颜色设置为透明，它将是不可见的。

Answer 2

这是因为border-bottom实际上与4px一起增加了内容框的大小。阅读更多：https://www.w3schools.com/css/css_boxmodel.asp

您可以使用伪元素::after在li-元素下制作一条4px线，如下所示：

nav {
display: flex;
justify-content: space-around;
flex-direction: row;
align-content: center;
align-items: center;
width: 100%;
background-color: #a33454;
}
nav div {
margin: 0.5rem;
}
nav div {
height: 60px;
width: 150px;
}
nav ul {
display: flex;
list-style: none;
justify-content: space-between;
margin: 0.5rem;
align-items: center;
align-content: center;
}
nav ul li {
font-size: 1.3rem;
padding: 0.5rem;
margin: 0.2rem 0.6rem;
position: relative;
}
nav ul li::after {
content: '';
display: none;
position: absolute;
color: #022222;
background-color: #022222;
height: 4px;
width: 100%;
bottom: 0;
left: 0;
}
nav ul li:hover::after {
display: block;
}

<header>
<nav>
<div>
</div>
<ul>
<li><a>one</a></li>
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
</nav>
<div class="banner">
</div>
</header>

通过给它width: 100%和height: 4px;，伪元素将具有li-元素的全宽以及指定的4px高度。