如何避免导航li元素hover时的盒子位移问题？

这个问题我太熟悉啦！你遇到的位移问题根源很清晰：当鼠标悬停在.nav-link上时，你给它添加了border-left: 5px solid #37BDE7，但默认状态下这个元素并没有左边框。这就导致hover时元素的总宽度突然增加了5px，整个盒子自然会向右偏移。

最简洁的解决方案：提前预留边框空间 #

我们只需要给.nav-link默认添加一个透明的左边框，这样hover时只需要修改边框颜色，元素的总宽度始终保持一致，就不会出现位移了。修改后的SCSS代码如下：

>.nav-item {
  >.nav-link {
    color: #515253;
    /* 提前预留5px左边框空间，默认透明不可见 */
    border-left: 5px solid transparent;
    /* 可选：添加过渡动画，让hover效果更丝滑 */
    transition: all 0.2s ease;
    
    &:hover {
      color: #85899B;
      /* 仅修改边框颜色，宽度保持不变 */
      border-left-color: #37BDE7;
      background-color: #f2f2f2;
    }
  }
}

原理说明 #

默认状态下，透明边框已经占据了5px的宽度空间，hover时只是把边框颜色从透明改成#37BDE7，元素的总宽度（内容+内边距+边框）没有发生任何变化，因此盒子不会产生位移。

备选方案：用padding抵消边框宽度 #

如果你不想提前加边框，也可以通过调整内边距来抵消边框带来的宽度变化：

>.nav-item {
  >.nav-link {
    color: #515253;
    padding-left: 5px; /* 默认预留5px内边距 */
    transition: all 0.2s ease;
    
    &:hover {
      color: #85899B;
      border-left: 5px solid #37BDE7;
      padding-left: 0; /* 移除内边距，抵消边框增加的宽度 */
      background-color: #f2f2f2;
    }
  }
}

不过这种方法需要精确计算内边距和边框的数值，不如第一种方法直观好维护，更推荐第一种方案。

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