text-align: right对按钮无效，因其仅作用于内联内容对齐，不控制块级子元素布局；正确做法是用display: flex配合justify-content: space-between实现两按钮左右贴边对齐。
直接用 display: flex + justify-content: space-between 就能实现两个按钮左右贴边对齐，不需要 float、绝对定位或手动算 margin。
为什么 text-align: right 对按钮没用？
因为 <button> 默认是 inline-block，但如果你把它包在 <div> 里，而这个 <div> 是块级元素且宽度占满父容器，text-align 只会影响它内部的“文本流”，不会让整个 <div> 右移——你真正想动的是容器内子元素的位置，不是文字对齐。
- 常见错误：给父
<div>加text-align: right，但里面放的是两个<button>，结果只有一个靠右，另一个还在左边堆着 - 根本原因：
text-align不控制块级子元素的布局位置，只影响内联内容的对齐 - 替代方案：要么把按钮设为
inline-block并确保父容器有足够宽度，要么直接上 Flex
justify-content: space-between 的实际用法
这是最干净的两边对齐方式，前提是容器里**只有两个可渲染的子元素**（比如两个 <button>），它会让第一个贴左、最后一个贴右，中间不留空隙。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须把按钮的**直接父容器**设为 flex 容器：
display: flex - 写
justify-content: space-between，不是flex-end或space-around - 如果按钮之间有其他元素（比如文字、图标、
<span>），space-between会把它们也纳入分配逻辑，可能出意料之外的间距 - 若只需要一个按钮靠右，另一个靠左，但中间还要留空或加分隔线，建议改用
margin-left: auto给右边那个按钮
按钮高度不一致时怎么垂直居中？
默认情况下，justify-content 只管水平轴；垂直方向得靠 align-items。如果两个按钮一个是图标按钮、一个是带文字的宽按钮，高度不同，光靠 space-between 会让它们上下错位。
立即学习“前端免费学习笔记（深入）”；
- 在父容器加
align-items: center，所有子项在交叉轴（这里是垂直方向）上居中对齐 - 注意：如果按钮本身设置了
vertical-align或line-height，可能和align-items冲突，优先以 flex 的行为为准 - 个别按钮需要单独调整垂直位置？用
align-self: flex-start或align-self: flex-end覆盖父级的align-items - 别忘了给父容器设个明确高度，或让它能自然撑开（比如用
min-height或内容流高度）
真正容易被忽略的是容器的“直接子元素”范围——只要多套一层 <div> 或不小心加了空格文本节点，space-between 就可能把空白当元素来分配。检查浏览器开发者工具里的 computed styles，确认 flex 容器下确实只有两个有效子节点，比反复调样式更省时间。
