保持<li>元素悬停状态下的位置一致性

方案1：默认添加透明边框（推荐） #

给

示例CSS代码：

.question-options li {
  /* 保留你原有的其他样式 */
  border: 2px solid transparent; /* 预先占好边框空间 */
  transition: border-color 0.2s ease; /* 可选：加个过渡动画让边框变化更平滑 */
}

.question-options li:hover {
  border-color: blue; /* 悬停时显示蓝色边框 */
}

方案2：使用outline代替border #

outline是绘制在元素外围的线条，它不占据布局空间，所以加outline不会改变元素尺寸，也就不会移位。不过要注意，outline的位置和border略有不同（默认在border外侧），而且部分浏览器对outline的样式支持有限。

示例CSS代码：

.question-options li:hover {
  outline: 2px solid blue;
  outline-offset: 0; /* 可选：调整outline和元素的距离 */
}

方案3：用box-sizing: border-box强制尺寸包含边框 #

给

示例CSS代码：

.question-options li {
  box-sizing: border-box;
  width: 200px; /* 假设你设置了固定宽度 */
  /* 保留其他原有样式 */
}

.question-options li:hover {
  border: 2px solid blue;
}

你可以根据自己的布局需求选其中一种，方案1是最稳妥的，基本不会有兼容性或布局适配问题~

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