html - 添加填充而不移动元素

Question

当我将鼠标悬停在填充元素上时，它会移动一点如何使其稳定

<nav>
  <ul id="nav-ul">
    <li ><a href="#" class="nav-item">Profile</a></li>
    <li ><a href="#" class="nav-item">Home</a></li>
    <li ><a href="#" class="nav-item">Friends</a></li>
    <li ><a href="#" class="nav-item">Notifications</a></li>
  </ul>
</nav>

这是CSS代码

nav ul li {
    float: right;
    list-style: none;
    padding: 15px;
    padding-left: 40px;

}
.nav-item{
    color: #fff;
    text-decoration: none;
}
.nav-item:hover {
    background-color: #2c3e50;
    padding: 5px;
}

标签： htmlcsshoverpadding

Answer 1

只需padding: 5px;从您的CSS中删除：

.nav-item {
  padding: 5px;
}

.nav-item:hover {
  background-color: #2c3e50;
}

<nav>
  <ul id="nav-ul">
    <li ><a href="#" class="nav-item">Profile</a></li>
    <li ><a href="#" class="nav-item">Home</a></li>
    <li ><a href="#" class="nav-item">Friends</a></li>
    <li ><a href="#" class="nav-item">Notifications</a></li>
  </ul>
</nav>