订单结算页按钮必须垂直堆叠，禁用float；应使用display: flex + flex-direction: column + gap布局，主次按钮需视觉权重分明，图标按钮须flex对齐，响应式下用相对单位并兼容ios旧版safari。
订单结算页按钮必须垂直堆叠，不能用 float
订单结算页的按钮（如“确认支付”“返回购物车”“查看优惠券”）天然具有操作优先级和阅读顺序，必须严格按垂直流式排列。用 float 会导致父容器塌陷、响应式错乱，且在移动端极易换行错位——尤其当按钮文字长度不一致时，float: left + width: 50% 这类写法在高DPI屏上会因小数像素累积偏差而挤出第三行。
正确做法是给按钮容器设 display: flex + flex-direction: column，每个按钮保持默认 display: block 即可。不需要额外设置 width 或 float：
div.order-actions {
display: flex;
flex-direction: column;
gap: 12px; /* 比 margin 更可靠，不触发外边距合并 */
}
-
gap能自动处理所有子元素间距，包括 :first-child 和 :last-child - 避免用
margin-bottom给每个按钮加间距——万一某个按钮被v-if或ngIf动态隐藏，就会留下多余空隙 - 如果按钮需固定高度（如统一 48px），直接设
min-height: 48px，别用height，防止文字换行时被截断
“返回”和“提交”按钮要视觉权重分明
结算页里，“返回购物车”是次要操作，“确认支付”是关键动作，两者不能并列居中或等宽显示。常见错误是给两个按钮都设 width: 100% 或都套 text-align: center，结果用户一眼看不出哪个该点。
推荐用结构区分权重：
- 主按钮（如
confirm-btn）用实色背景 + 全宽：width: 100%，font-weight: 600 - 次按钮（如
back-btn）用描边样式 + 居中显示：width: fit-content，margin: 0 auto，同时确保父容器有明确宽度（否则margin: 0 auto失效） - 禁用状态统一加
opacity: 0.5+cursor: not-allowed，不要只改颜色——视觉反馈必须包含灰度和光标双重信号
带图标的按钮图文对齐容易错位
结算页常出现“微信支付”“支付宝”这类带品牌图标的按钮，用 background-image 或 <i></i> 标签时，图标和文字基线不对齐是最典型问题：图标偏上、文字下沉、整体看起来“飘”。
最稳方案是用 Flexbox 内部对齐：
button.icon-btn {
display: flex;
align-items: center;
gap: 8px; /* 图标与文字间距 */
padding-left: 0; /* 避免 background-image 和 padding-left 冲突 */
}
- 图标用
<svg></svg>内联而非background-image——后者无法随文字大小缩放，且在暗色模式下可能不可见 - 如果必须用字体图标（如 Font Awesome），加
vertical-align: -0.125em微调基线，而不是依赖默认的middle - 所有图标统一设
width: 1.2em、height: 1.2em，用em单位保证随字体缩放
响应式断点下按钮宽度不能写死 px
在 iPad 或折叠屏设备上，结算页可能横屏显示，此时按钮若写了 width: 320px 就会溢出容器，且无法适配不同系统字体缩放设置。
应该用相对单位+约束：
- 主按钮宽度用
width: 100%，但加max-width: 480px防止过宽 - 次按钮用
width: fit-content+max-width: 80%，避免长文本撑爆视口 - 在
@media (min-width: 768px)下可改为水平排列：flex-direction: row+justify-content: space-between，但必须确保两个按钮总宽度不超过容器内边距后的可用空间
真正麻烦的是 iOS Safari 对 gap 的兼容性——iOS 14.5 以下不支持 gap，得回退到 margin-bottom 并用 :not(:last-child) 选择器；这点很容易被忽略，一上线就发现按钮间距双倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
