text-align: right对按钮无效，因其仅作用于内联内容对齐，不控制块级子元素布局；正确做法是用display: flex配合justify-content: space-between实现两按钮左右贴边对齐。
直接用 display: flex + justify-content: space-between 就能实现两个按钮左右贴边对齐，不需要 float、绝对定位或手动算 margin。
为什么 text-align: right 对按钮没用？
因为 <button></button> 默认是 inline-block，但如果你把它包在 <div> 里，而这个 <code><div> 是块级元素且宽度占满父容器，<code>text-align 只会影响它内部的“文本流”，不会让整个 <div> 右移——你真正想动的是容器内子元素的位置，不是文字对齐。
<ul><li>常见错误：给父 <code><div> 加 <code>text-align: right，但里面放的是两个 <button></button>，结果只有一个靠右，另一个还在左边堆着
text-align 不控制块级子元素的布局位置，只影响内联内容的对齐inline-block 并确保父容器有足够宽度，要么直接上 Flex
justify-content: space-between 的实际用法
这是最干净的两边对齐方式，前提是容器里**只有两个可渲染的子元素**（比如两个 <button></button>），它会让第一个贴左、最后一个贴右，中间不留空隙。
- 必须把按钮的**直接父容器**设为 flex 容器：
display: flex - 写
justify-content: space-between，不是flex-end或space-around - 如果按钮之间有其他元素（比如文字、图标、
<span></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> 或不小心加了空格文本节点，<code>space-between 就可能把空白当元素来分配。检查浏览器开发者工具里的 computed styles，确认 flex 容器下确实只有两个有效子节点，比反复调样式更省时间。
