如何整齐对齐复选框与单选框 解决flex及position:relative失效问题

问题根因 #

• 你给#sect-2、#sect-3设置了display:flex但未指定排列方向，默认横向排列所有子元素导致布局混乱
• 单选框额外加了position: absolute; left:300px固定定位，脱离了正常文档流导致位置错位
• 未对单选/复选框的label容器做统一对齐配置，缩放后的输入框和文字没有垂直居中

修复方案 #

直接替换CSS中对应部分的代码即可：

1. 先删除原有input[type=radio]样式中的position: absolute; left: 300px;属性
2. 替换原有#sect-2, #sect-3相关样式，新增单选复选label的对齐配置：

#sect-2,
#sect-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 单选/复选框label统一对齐样式 */
#sect-2 label:not(:first-child),
#sect-3 label {
  width: 220px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}
/* 修正单选框样式 */
input[type=radio] {
  -ms-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);
  margin: 0;
}
/* 修正复选框和文字的对齐 */
input[type=checkbox] {
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  margin: 0;
}

如果需要调整选项整体的左右位置，修改label的width属性即可，数值越大选项整体越靠右。

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