label和input[type="radio"]默认应并排，换行主因是CSS将label设为block或浮动失衡；推荐用inline-block+vertical-align对齐，长文本则用flex+align-items:flex-start，并确保语义正确与可访问性。
label 和 input[type="radio"] 默认不在同一行，根本原因不是 HTML 写错了，而是 CSS 把 label 渲染成了 display: block（尤其在重置样式、Bootstrap 或某些 UI 框架下），或者用了浮动但没同步处理 label。
为什么 label 和 radio 经常换行？
浏览器原生默认中，label 是内联元素，本该和 input 并排；但一旦引入外部 CSS（比如 normalize.css、reset.css，或框架的表单重置规则），就可能被设为 display: block 或 display: table-cell。另外，如果用了 float: left 但只加在 input 上，而 label 仍是块级，也会强制换行。
- 检查开发者工具里
label的 computeddisplay值，不是inline或inline-block就是根源 - 不要依赖“嵌套写法”（
<label><input type="radio">文本</label>）来规避问题——它虽能联动点击，但对齐仍受 CSS 控制 - 若用
for/id显式关联，结构更清晰，也方便单独控制样式
用 inline-block 实现稳定并排（推荐）
这是兼容性好、行为可预测的做法，尤其适合单行短文本标签：
.radio-group label {
display: inline-block;
vertical-align: middle;
margin-right: 12px;
}
.radio-group input[type="radio"] {
vertical-align: middle;
margin-top: -2px; /* 微调视觉基线 */
}-
vertical-align: middle必须同时加在label和input上，否则单选框会下沉 -
margin-right加在label上比加在input上更可控，避免影响后续元素 - 不要用
float：容易引发父容器塌陷，且响应式场景下难维护
用 Flexbox 处理多行文本或复杂对齐
当 label 文本较长、需换行，又要求单选框始终与第一行顶部对齐时，inline-block 会失效，必须用 Flexbox：
立即学习“前端免费学习笔记（深入）”；
.radio-item {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 6px;
}
.radio-item input[type="radio"] {
margin-top: 2px; /* 补偿 flex-start 后的轻微偏移 */
}- HTML 结构要改为同级：
<div class="radio-item"><input><label for="x">长文本…</label></div> -
align-items: flex-start是关键，center会让单选框居中于多行文本整体，视觉错位 -
gap替代margin更安全，不会因 margin 折叠导致间距异常
容易被忽略的可访问性细节
对齐只是表象，真正影响体验的是语义和交互是否健全：
- 必须确保每个
input[type="radio"]有唯一id，且对应label的for属性值完全一致（大小写、连字符都不能错） - 不要用
visibility: hidden或opacity: 0隐藏单选框再用伪元素模拟——这会让屏幕阅读器丢失控件状态 - 如果用了自定义样式（如
appearance: none），务必手动添加focus样式，否则键盘用户无法感知当前焦点
最麻烦的不是让它们“看起来”在一排，而是让它们在各种缩放、高对比度模式、屏幕阅读器下依然保持逻辑一致和操作可达——对齐只是第一步，别停在这儿。
