单选按钮纵向排列应设label为display: block或用flex-direction: column布局，而非对input设block或用换行；所有input需共用name值以保证互斥。

单选按钮默认不换行，是因为它们是行内元素

浏览器把 当作行内级元素（类似 ），所以多个按钮会挤在同一行，除非容器宽度不够或遇到强制换行。想纵向排列，核心不是“让它换行”，而是“让每个按钮独占一行”或者“控制布局流”。

最直接有效的方式是改变其显示行为或包裹结构：

• 给每个 或 加 display: block —— 简单、兼容性好、无需额外 HTML
• 用
  或

  包裹每组 + —— 语义更清晰，也方便后续加样式
• 避免只对 单独设 display: block：它会和文字错位，因为 还是行内元素

推荐写法：label 设为 block，input 保持默认

这是最稳妥的实践。把 当作布局单元，既保证可点击区域大，又自然换行：

<label style="display: block;">
  <input type="radio" name="theme" value="light"> 浅色主题
</label>
<label style="display: block;">
  <input type="radio" name="theme" value="dark"> 深色主题
</label>

关键点：

• display: block 写在 上，不是 —— 否则文字会跑到按钮下方
• 所有 必须共用相同的 name 值，否则无法互斥选择
• 如果用 CSS 类代替行内 style，记得在类中明确写 display: block，不要依赖继承

Flex 布局也能做，但要注意方向和间距

用 flex-direction: column 可以实现纵向排列，但需包裹一层容器：


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载

<div style="display: flex; flex-direction: column; gap: 8px;">
  <label><input type="radio" name="size" value="s"> 小</label>
  <label><input type="radio" name="size" value="m"> 中</label>
  <label><input type="radio" name="size" value="l"> 大</label>
</div>

注意：

• gap 比 margin 更可控，避免外边距合并问题
• 别忘了设置 flex-direction: column，否则默认是横向排布
• 旧版 Safari 对 gap 支持有限，如需兼容 iOS 14.5 以下，改用 margin-bottom

常见错误：用
强制换行

虽然能“看起来”换行，但有明显缺陷：

• 语义混乱：
是换行符，不是布局工具
• 响应式失效：在小屏幕上，按钮可能因文字变宽而再次挤到同一行
• 维护困难：增删选项时要同步调整
数量，容易漏掉或多余
• 无障碍支持差：屏幕阅读器可能误读换行符为内容分隔

真正需要纵向排列时，display: block 或 flex column 才是面向意图的写法。

记住：按钮本身不决定排列方式，是它的父容器或关联标签的显示模式在起作用。别在 上硬塞布局逻辑。