单选按钮组默认纵向堆叠，无需额外设置display: flex；必须为每个radio设置唯一id并用for属性绑定label以确保点击有效性和可访问性。
单选按钮组默认就是纵向堆叠，别乱加 display: flex
浏览器对 <input type="radio"> 本身没有强制方向，默认行为是块级元素逐行排列——所以不写任何 CSS，它天然纵向布局。很多人一上来就套 display: flex; flex-direction: column;，纯属多此一举，还可能干扰 label 的点击热区或破坏语义结构。
真正需要干预的，是 label 和 radio 的相对位置、间距、对齐方式。常见错误包括：
- 只用
<label>文字</label>包裹 input，但没设for和id，导致移动端点击失效 - 给 radio 加
float: left或display: inline-block，结果在 iOS Safari 上 label 点击偏移 - 用
margin-top控制间距，却忘了 label 默认有上下 margin，造成视觉重叠
移动端点击区域太小？必须显式绑定 for + id
单纯把 <input> 塞进 <label> 里，在现代浏览器中虽能工作，但在部分 Android WebView 和旧版 Safari 中不可靠——尤其当 label 内含 padding、flex 或 reset 样式时，点击事件可能不触发。
可靠做法只有这一种：
立即学习“前端免费学习笔记（深入）”；
- 每个
<input type="radio">必须带唯一id，例如id="theme_dark" - 对应
<label for="theme_dark">，for值必须和id完全一致（大小写、空格、连字符都不能差） - 避免用
display: none隐藏 radio；改用position: absolute; opacity: 0; width: 1px; height: 1px;保可访问性
这样 label 才真正成为整个选项的点击区域，哪怕文字只有一两个字，用户点 label 任意位置都能选中。
表格内放单选按钮，纵向布局会崩？先清 td 的 vertical-align
把 radio 组放进 <td> 里，常出现“所有按钮挤在左上角”“文字和按钮不对齐”“换行错位”——根本原因不是 radio 本身，而是 <td> 默认 vertical-align: middle 和 line-height 干扰了基线对齐。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
修复只需两步：
- 给
<td>加vertical-align: top，让内容从顶部开始排布 - 给 radio 和 label 外层包一个
<div class="radio-group">，再设display: flex; flex-direction: column; gap: 8px; - 禁用
line-height继承：在 label 上加line-height: 1.4;，避免被表格行高拉扯
注意：不要直接给 <input> 设 height 或 vertical-align，它在表格单元格里会和 td 的渲染逻辑冲突。
横向屏幕下 radio 组变宽？用 clamp() 控制最大宽度而非媒体查询
PC 端横向布局没问题，但平板横屏或桌面端缩放时，label 文字拉得太长，radio 组横向撑开，破坏纵向节奏。这时候别急着写 @media (min-width: 768px)，因为邮件客户端、微信内置浏览器、某些企业 OA 系统根本不支持 media query。
更稳的方案是用 clamp() 限制 label 宽度：
.radio-group label {
max-width: clamp(120px, 80vw, 300px);
word-break: break-word;
}
含义是：最小 120px，理想值为视口宽的 80%，但不超过 300px。这样既防文字过长撑开布局，又避免小屏下截断，且所有现代浏览器（包括 iOS 15+ Safari）都支持。
真正容易被忽略的是 value 值长度——如果后端要求 value="very_long_option_name_with_underscores"，而你又没在 label 里用简短文案，用户一眼看不出选了什么。value 只用于提交，显示文案务必独立控制。
