调查问卷表单单选按钮与文本对齐异常问题求助

• 设置垂直对齐属性：这是最常见的错位修复方案，给单选按钮或对应文本添加vertical-align: middle;，搭配微调间距适配布局：

input[type="radio"] {
  vertical-align: middle;
  margin: 0 4px 2px 0;
}

• 排查盒模型与浮动影响：如果父元素或单选按钮本身设置了margin/padding或float属性，会打乱行内布局。可以重置基础样式并清除浮动：

.radio-group {
  overflow: hidden; /* 清除子元素浮动带来的布局混乱 */
}
input[type="radio"], .radio-label {
  margin: 0;
  padding: 0;
  float: none;
}

• 优化DOM结构：避免把单选按钮和文本放在独立块级容器中，推荐用<label>包裹关联元素，既保证行内布局，又提升交互性（点击文本可选中按钮）：

<label>
  <input type="radio" name="survey-option" value="opt1">
  <span>选项文本内容</span>
</label>

• 排查全局样式冲突：用浏览器开发者工具（F12）查看元素实际生效的CSS规则，检查是否有全局样式给input或label设置了display: block等影响行内布局的属性，针对性覆盖即可。

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