text-align: justify 对单个按钮无效，因其是替换元素且无内部可伸缩间隙；两端对齐需至少两个元素（如价格+按钮），推荐用 flex + space-between，伪 justify 方案仅作兼容兜底。
用 text-align: justify 为什么按钮不两端对齐？
直接给按钮父容器加 text-align: justify 通常没用——因为 justify 只对「多行内联内容」或「有空格分隔的多单词行内元素」生效，单个 <button></button> 是替换元素（replaced element），默认独占一行且无内部可伸缩间隙，浏览器不会为它插入额外空格来拉伸对齐。
真正有效的两端对齐方案：Flex 布局 + justify-content: space-between
这是最可靠、语义清晰、兼容性好的做法，适用于「加入购物车」这类常与价格/数量并排显示的场景：
<div class="cart-row"> <span class="price">¥299</span> <button class="add-to-cart">加入购物车</button> </div>
对应 CSS：
.cart-row {
display: flex;
justify-content: space-between;
align-items: center;
}
<p>.add-to-cart {
/<em> 避免按钮被 flex 压缩 </em>/
flex: 0 0 auto;
}- 如果按钮需要固定宽度（比如统一 120px），直接加
width: 120px；若想自适应文字长度，保持flex: 0 0 auto即可 - 注意不要同时设
flex: 1或width: 100%，否则按钮会撑满剩余空间，失去“两端”的意义 - IE10+ 支持该写法；如需支持 IE9，得退回到
display: table方案（但更难控制垂直居中）
纯 CSS 实现单按钮“伪两端对齐”（不推荐但偶有用）
当设计稿强制要求按钮文字左右边缘严格贴容器边界（比如卡片底部通栏按钮），且无法改结构时，可用 text-align: justify 配合隐藏的伪元素强行制造“多词”假象：
立即学习“前端免费学习笔记（深入）”；
<div class="btn-container"> <button class="add-to-cart">加入购物车</button> <span aria-hidden="true" class="justify-filler"> </span> </div>
.btn-container {
text-align: justify;
}
.btn-container::after {
content: "";
display: inline-block;
width: 100%;
}
.add-to-cart {
display: inline-block;
margin: 0;
}- 核心是
::after生成一个换行用的 100% 宽块，让浏览器认为这是一行含两个“词”的文本，从而触发justify的间隙分配逻辑 - 必须加
aria-hidden="true"和display: inline-block，否则屏幕阅读器会误读空格，且默认span不参与 justify 计算 - 这个技巧对字体渲染敏感，小字号下可能出现像素级错位，移动端尤其容易失效
按钮本身要不要加 width: 100%？
不要。除非你明确要它填满整行（此时已不是“两端对齐”，而是“全宽按钮”）。真正的两端对齐本质是「两个锚点之间的空间分配」，至少需要两个可见元素（比如价格+按钮、图标+文字、左文案+右按钮）才能成立。单独一个按钮谈不上“两端”——它只有自己的左右边界。
最容易被忽略的是：设计师口中的“两端对齐”，往往实际指的是“左侧价格左对齐，右侧按钮右对齐”，而不是让按钮内部文字拉伸。盯紧真实布局意图，比套 CSS 属性更重要。
