CSS导航栏链接设置hover效果时文字位移问题如何解决

悬停时文字偏移的核心原因是你仅在:hover状态为<a>标签设置了padding: 20px，默认状态下的<a>标签无内边距，鼠标移入时padding突然生效会改变元素占位尺寸，直接挤压周边布局导致文字位移。同时你在外层<li>标签上设置了25px内边距，和<a>标签的内边距叠加，会进一步造成布局计算混乱。

• 按钮内边距统一写在<a>标签的默认样式中，不要仅在hover状态修改padding值，保证悬停前后元素占位尺寸完全一致，从根源避免位移
• 移除<li>标签上的冗余padding，避免两层内边距冲突；同时给<a>标签设置块级展示，让背景色可以完整覆盖整个按钮区域
• 过渡属性写在<a>标签的默认样式上，保证鼠标移入、移出时都有平滑的过渡效果，不要仅写在hover状态下

修正后的完整代码如下：

.nav-items {
  display: flex;
  transform: translateX(0px);
  margin-right: 5%;
}

.nav-items li {
  list-style: none;
  /* 移除li原有padding，避免和a标签内边距叠加 */
}

.nav-items a {
  color: white;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 14px;
  /* 默认状态统一设置内边距，悬停时不再修改该值 */
  padding: 20px;
  /* 块级展示让背景色完整填充内边距区域 */
  display: block;
  /* 过渡属性放在默认状态，移入移出均生效 */
  transition: 0.2s ease-in-out;
}

.nav-items li a:hover {
  background-color: #006aff;
  /* hover状态仅修改背景色，不改动影响布局的属性，不会触发位移 */
}

编写交互样式时遵循一个通用规则：如果不希望元素出现位置跳动，就不要在hover、active这类状态切换时修改会改变元素布局尺寸的属性（包括padding、margin、border、宽高等），仅修改颜色、阴影、透明度这类不影响文档流占位的属性即可。如果确实需要调整这类属性，必须保证默认状态和交互状态下的元素占位尺寸完全一致。

内容的提问来源于stack exchange，提问作者Rui