哈哈，这个问题我太熟了！之前做导航栏的时候踩过一模一样的坑，咱们先搞懂为啥会移位，再给你几个靠谱的解决办法：

本质是CSS盒模型的布局计算逻辑在搞事情：

• 当你给li:hover添加border-bottom时，border是会占据元素的布局空间的——原本你的li没有底部边框，hover时突然多了几像素的高度，浏览器会重新计算整个页面的布局，把下面的内容挤下去。
• 而font-weight:700（加粗）会让文字的实际显示宽度变宽，尤其是非等宽字体，hover时文字占的空间变大，就会把旁边的导航链接或者页面内容挤得向右偏移。

这种因为元素尺寸变化导致的页面内容移动，也叫「布局偏移（Layout Shift）」，是影响页面体验的常见问题之一。

我整理了几个常用的方案，你可以根据自己的需求选：

1. 提前预留空间（最推荐） #

核心思路是：让元素在非hover状态下就占据hover时的尺寸，hover时只改变颜色或其他不影响尺寸的属性。

针对border-bottom的情况： #

给li提前设置透明的底部边框，hover时只修改边框颜色，这样元素的高度始终不变，就不会移位了：

nav li {
  /* 提前预留边框的高度，颜色设为透明 */
  border-bottom: 2px solid transparent;
  /* 加个过渡动画，hover效果更丝滑 */
  transition: border-color 0.3s ease;
}

nav li:hover {
  /* 只改变边框颜色，尺寸不变 */
  border-bottom-color: #2563eb; /* 换成你想要的颜色 */
}

针对font-weight加粗的情况： #

• 方法一：给li设置固定宽度，确保文字加粗后不会超出预留的空间：

nav li {
  width: 90px; /* 根据你的文字长度调整合适的宽度 */
  text-align: center; /* 让文字居中，避免偏移 */
}

nav li:hover {
  font-weight: 700;
}

• 方法二：用transform: scale()模拟加粗效果，缩放不会改变元素的实际布局尺寸：

nav li:hover {
  transform: scale(1.08); /* 缩放比例可以自己调 */
  transform-origin: center; /* 以文字中心为基准缩放 */
  transition: transform 0.2s ease;
}

2. 全局设置box-sizing: border-box #

这个属性会让元素的width和height包含border和padding的尺寸，不过如果是原本没有border的元素，hover时新增border还是会增加总尺寸，所以更适合和「提前预留空间」的方法配合使用，能更精准控制盒模型：

/* 全局设置，让所有元素都使用border-box盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

3. 用outline代替border（适合全边框需求） #

outline是绘制在元素外部的线条，不会占据布局空间，所以hover时加outline不会导致移位。不过outline不能单独设置单边，如果你只需要底部的边框，这个方法就不太适用，但如果是给整个导航项加边框的话可以试试：

nav li:hover {
  outline: 2px solid #2563eb;
  outline-offset: 0; /* 控制outline和元素的距离 */
}

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