radio默认横向排列是因为浏览器将和均渲染为inline元素，按HTML规范自然并排显示；纵向排列最稳妥方案是为每个radio+label容器设display: block，并用vertical-align: middle对齐。
radio默认横向排列的原因是什么
浏览器对<input type="radio">的默认样式是行内元素（display: inline），且<label></label>通常也默认为inline，所以多个radio+label会挤在同一行，直到父容器换行。这不是bug，是HTML规范下的自然行为。
用CSS让radio纵向排列最稳妥的方法
给包裹每个radio及其label的容器（推荐<div>或<code><li>）设置display: block，并确保label不被强制内联：
<div class="radio-group"> <div><input type="radio" name="theme" id="light"><label for="light">浅色主题</label></div> <div><input type="radio" name="theme" id="dark"><label for="dark">深色主题</label></div> <div><input type="radio" name="theme" id="auto"><label for="auto">自动适配</label></div> </div>
对应CSS：
.radio-group > div {
display: block;
margin-bottom: 8px;
}
.radio-group input[type="radio"] {
vertical-align: middle;
}
.radio-group label {
display: inline;
margin-left: 4px;
vertical-align: middle;
}- 不用
br强行换行——语义错误，响应式下易错位 - 避免只给
label设display: block——radio本身仍是inline，可能和label错位 - 加
vertical-align: middle防止radio和文字基线不对齐
Flex布局实现时容易忽略的兼容性问题
用flex-direction: column确实简洁，但要注意IE10–IE11对flex在表单控件上的支持不稳定，radio可能不响应align-items或错位：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.radio-group {
display: flex;
flex-direction: column;
gap: 8px; /* 推荐用gap而非margin，更可控 */
}- 如果需兼容IE11，改用
display: block方案更稳 -
gap在老版Safari（margin - 不要对
input本身设flex属性——它不是flex item的常规操作对象
为什么不能只靠white-space: pre-line或text-align
这些属性作用于文本内容或块级容器的对齐方式，对input这类替换元素（replaced element）的布局无直接影响。试图用text-align: center让radio居中，结果往往是label居中而radio飘在左边——因为radio本身没被包含在文本流对齐范围内。
真正起效的是控制**容器的显示类型**和**子元素的参与方式**，而不是文本排版指令。
纵向排列的本质是让每组radio-label成为独立的块级单元；任何绕过这一点的“技巧”，比如用float或position: absolute，都会增加维护成本，且在表单验证、无障碍读取（screen reader）时出问题。
