单选按钮必须通过label包裹或for/id显式关联，否则点击文字无效；td中vertical-align失效应改用flex布局；横向排列推荐flex而非white-space:nowrap；语义分组需fieldset+legend；动态插入时name须严格一致。
label 必须显式关联 input，不能只靠相邻位置
点击文字无法选中单选按钮，八成是因为 label 没和 input 建立有效关联。浏览器不会自动把紧挨着的文本当作 label —— 即使 HTML 里写成 <input type="radio" name="a">选项一，点击“选项一”也无效。
正确做法只有两种：
-
label包裹input和文本：<label><input type="radio" name="a" value="1">选项一</label> - 或用
for属性指向input的id：<input id="opt1" type="radio" name="a" value="1"><label for="opt1">选项一</label>
漏写 id 或拼错 for 值（比如 for="opt1" 对应 id="o1"）是常见错误，会导致无障碍支持失效、移动端点击热区丢失。
vertical-align: middle 在表格单元格里容易失效
在 <td> 里给 <code>input[type="radio"] 加 vertical-align: middle 看似合理，但实际常对不齐——因为 td 默认是块级上下文，vertical-align 只对行内元素生效，且对齐基准是小写字母 x 的中心，不是汉字视觉中心。
更稳的解法是让容器接管对齐逻辑：
- 设
td { display: flex; align-items: center; gap: 6px; }，无视 baseline 差异 - 确保
input和label是同级子元素（别嵌套div或p） - 字体大于
16px时，align-items: center依然可靠；而vertical-align往往要额外加margin-top: -1px微调
横向排列单选组别硬塞 white-space: nowrap
想让一组单选按钮横排，很多人直接给父容器加 white-space: nowrap，再把所有 label 写在同一行。这看似能防换行，但会带来两个隐患：一是空格字符被压缩后难以控制间距，二是响应式断点下文字溢出不可控。
推荐用 display: flex 替代：
fieldset { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }- 每个
label保持默认display: inline-flex或inline-block，内部用align-items: center对齐文字和按钮 - 避免给
input单独设inline-block：它无内容尺寸，vertical-align容易失准
name 相同但没共用父容器，语义就断了
单选按钮互斥只依赖 name 属性相同，技术上确实不需要包裹容器。但实际项目中，如果一组 input[name="theme"] 分散在不同 div、甚至不同 section 里，可访问性会出问题：屏幕阅读器无法识别它们属于同一逻辑组，legend 也无法统一对焦说明。
必须补上语义化包装：
- 用
<fieldset> <legend>主题风格</legend>...</fieldset>明确分组意图 -
legend文本要简洁准确，别写“请选择”这种废话 - JS 动态插入选项时，确保新
input的name和已有项完全一致（注意大小写、空格、连字符）
最易忽略的是：当单选组用于评分量表（如 Likert 表格）时，name 应体现题号（如 name="q3"），而非统一用 name="rating" —— 否则后端收不到具体哪题的答案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
