按钮默认垂直排列是浏览器规范行为，因button在文档流中独占一行；若未垂直排列，常见原因是父容器启用flex但未设flex-direction:column，或按钮被设为inline/inline-block；强制垂直排列首选display:flex+flex-direction:column，次选display:block。
按钮默认就是垂直排列，不需要额外操作
浏览器把 <button> 当作可变元素（inline-level），但实际渲染行为更接近块级：在标准文档流中，多个 <button> 默认会各自换行、垂直堆叠。这不是 bug，是规范行为——它和 <p>、<div> 的“独占一行”逻辑不同，但视觉效果一致。
所以如果你发现按钮没垂直排列，大概率是因为：
- 父容器用了
display: flex且没设flex-direction: column - 按钮被显式设了
display: inline-block或display: inline - 外层用了
float或position: absolute打乱了正常流
想强制垂直排列，用 flex-direction: column 最干净
当需要可控的垂直间距、对齐或响应式控制时，display: flex + flex-direction: column 是首选。它不依赖元素默认行为，也不污染语义。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有明确的
display: flex，仅设flex-direction不生效 - 垂直居中用
align-items: center，水平居中用justify-content: center - IE10–IE11 支持基础 flex，但避免用
flex-wrap: wrap或gap（需 fallback） - 不要在 flex 容器上同时设
height: 100%而没给祖先元素设高度，否则计算为 0
用 display: block 强制按钮垂直排列，适用于老项目兼容
如果项目要支持 IE8 或需最小化 CSS 变动，直接给按钮加 display: block 即可。这是最轻量、最可预测的方式。
示例：
.btn {
display: block;
margin-bottom: 8px; /* 控制间距 */
}关键细节：
-
display: block会让按钮撑满父容器宽度，如需居中，加margin: 0 auto - 避免和
float混用——容易触发高度塌陷，且现代布局已无必要 - 不用删 HTML 换行符或设
font-size: 0，因为这里不涉及 inline-block 的间隙问题
别用 table 做垂直按钮排列
表格标签（<table>、<tr>、<td>）不是为 UI 控件设计的。用它排按钮会带来三类问题：
- 语义错误：
<table>表达的是二维数据关系，按钮是操作控件，屏幕阅读器会误读 - 可访问性降级：键盘导航顺序混乱，
role="button"无法覆盖原生语义冲突 - 维护成本高：每增一个按钮就得改 HTML 结构，CSS 难以统一控制间距与状态
即使为了兼容 IE6–7，也应优先用 display: block + 条件注释，而不是牺牲语义换兼容。
