为选中li添加白色边框导致内容偏移，如何解决？

这个问题我做项目时也踩过坑！核心原因是边框会占用额外的盒模型空间，当你给li添加active类的白色边框时，元素的总尺寸变大，直接把内部内容挤得偏移了。给你几个实用的解决办法：

方法1：使用box-sizing: border-box（最推荐） #

这是现代CSS布局的常用技巧，它能让元素的边框、内边距都包含在你设置的宽高之内，不会额外占用空间。只需要给你的li元素加上这个属性：

.quantity-grid li {
  box-sizing: border-box;
  /* 保留你原有的其他样式 */
}

这样不管有没有边框，li的总宽高都不会变化，内部内容自然就不会偏移了。

方法2：提前预留边框空间 #

默认给li设置一个和active状态宽度一致的透明边框，选中时再把颜色改成白色。这样元素的尺寸从一开始就包含了边框的宽度，切换状态时不会发生尺寸变化：

.quantity-grid li {
  border: 2px solid transparent; /* 宽度要和active类的边框保持一致 */
  /* 其他原有样式 */
}

.quantity-grid li.active {
  border-color: #fff; /* 选中时显示白色边框 */
}

方法3：用outline替代border #

outline是绘制在元素外部的线条，它不会影响元素的盒模型尺寸，所以不会导致内容偏移。不过要注意outline默认不占空间，可能会和周围元素重叠，你可以用outline-offset调整它的位置：

.quantity-grid li.active {
  outline: 2px solid #fff;
  outline-offset: -2px; /* 让outline和border的位置基本重合 */
}

个人最推荐第一种方法，因为box-sizing: border-box能从根源上解决很多盒模型相关的布局问题，后续维护也更省心。

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