如何让表单中的Yes/No单选框及标签实现响应式？

核心调整方案 #

针对小屏幕（如宽度≤768px），通过CSS媒体查询优化单选框组的布局逻辑，避免单选框与标签挤压重叠，同时保证交互体验和可读性。

1. 重构单选框组的基础布局 #

给包裹单选框的容器添加弹性布局，默认横向排列并保留合理间距；小屏幕下切换为垂直排列：

/* 基础布局：横向排列单选框 */
.radio-group {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

/* 小屏幕适配：垂直排列 */
@media (max-width: 768px) {
  .radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
}

2. 优化单选框与标签的对齐细节 #

确保单选框和关联标签紧密对齐，避免错位或挤压：

.radio-group input[type="radio"] {
  margin-right: 0.5rem;
  flex-shrink: 0; /* 防止单选框被压缩变形 */
}

.radio-group label {
  cursor: pointer;
  display: inline-flex;
  align-items: center; /* 让单选框与文字垂直居中对齐 */
}

3. 适配表单组的整体间距（可选） #

如果小屏幕下表单模块间距不足，可补充调整：

.form-group {
  margin-bottom: 1.2rem;
}

@media (max-width: 768px) {
  .form-group {
    margin-bottom: 1.5rem;
  }
}

4. 针对目标字段的专属优化（可选） #

如果moderator-experience和contribution字段有独立样式，可单独指定适配规则：

#moderator-experience .radio-group,
#contribution .radio-group {
  /* 自定义基础样式 */
}

@media (max-width: 768px) {
  #moderator-experience .radio-group,
  #contribution .radio-group {
    flex-direction: column;
    /* 其他小屏幕专属样式 */
  }
}

验证注意事项 #

• 在手机模拟器或真实小屏幕设备上测试，确认单选框与标签无重叠、换行正常
• 检查单选框的点击交互：确保标签的for属性与单选框id完全匹配，点击标签可触发选中
• 确认调整后不会破坏表单其他元素的响应式布局

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