使用Bootstrap Scrollspy时，li加border-left致a标签文本偏移如何修复？

这个问题我之前在做Bootstrap导航组件的时候也碰到过，本质是CSS盒模型的默认计算逻辑在搞鬼——默认的content-box盒模型会把边框和内边距算在元素总宽度之外，给<li>加border-left后，它的水平占用空间会变大，自然就把里面的<a>文本挤得右移了。给你几个靠谱的解决方案：

• 方案一：用box-sizing: border-box统一盒模型（推荐）
  给<li>加上这个属性后，边框和内边距会被包含在元素的指定宽度/内边距范围内，不会额外占用空间，文本位置就能保持不变：

  li {
    list-style: none;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid #your-color; /* 替换成你的边框颜色 */
    box-sizing: border-box; /* 关键属性，让边框包含在padding区域内 */
  }
  

  这个方案最省心，后续调整边框宽度也不用修改内边距值。

• 方案二：调整内边距抵消边框宽度
  如果不想修改盒模型，可以把<li>的padding-left减去边框的宽度，让总水平占用空间和原来一致：

  li {
    list-style: none;
    margin-bottom: 0.5rem;
    padding-left: calc(1rem - 2px); /* 1rem原内边距减去2px边框宽度 */
    border-left: 2px solid #your-color;
  }
  

  注意要根据你实际的边框宽度来调整calc里的数值。

• 方案三：把边框移到<a>标签上
  若布局允许，直接给<a>设置边框，同时确保<a>是块级元素（Bootstrap的导航链接默认已经是块级），这样边框不会影响<li>的内边距：

  li {
    list-style: none;
    margin-bottom: 0.5rem;
    /* 移除li的padding-left */
  }
  li a {
    display: block;
    padding-left: 1rem;
    border-left: 2px solid #your-color;
  }
  

简单总结下：默认盒模型下border会额外占空间，要么让边框“挤”进原有内边距（border-box），要么减少内边距抵消边框，要么把边框转移到子元素上，三种方法都能解决文本偏移的问题。

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