按钮内左右对齐需用flex布局：设button为display: flex，子元素分离为独立标签，用justify-content: space-between实现左贴左、右贴右，text-align无法精确控制。
按钮内左右对齐需要 flex 布局而非 text-align
单纯用 text-align: justify 或 text-align: left/right 无法让按钮内两个元素分别贴左贴右——text-align 只对内联内容起作用，且不支持“一左一右”的精确控制。真正可靠的方式是把按钮设为 display: flex，再用 justify-content: space-between。
- 必须给按钮加
display: flex，否则子元素无法按 flex 规则排列 - 子元素不能是纯文本（如直接写“保存 ←”），得包裹成独立标签（如
<span></span>或<i></i>），否则无法单独定位 - 如果按钮有固定宽高，
space-between在只有两个子元素时效果最稳；三个及以上时可能产生意外间隙
HTML 结构要拆开左右内容，不能混在一行文本里
错误写法：<button>提交 <span>→</span></button> —— 这样右边箭头会和文字挤在一起，无法真正右对齐。正确做法是把左右内容明确分离：
<button class="btn"> <span class="btn-text">提交</span> <span class="btn-icon">→</span> </button>
对应 CSS：
.btn {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
}
.btn-text { flex: 1; text-align: left; }
.btn-icon { flex: 0 0 auto; }
IE 兼容性问题：flex 在旧版 IE 中需加前缀或换方案
IE10–11 支持 display: flex 但要求加 -ms- 前缀，且 space-between 在某些版本中表现异常。若必须兼容 IE10+，建议：
- 加
display: -ms-flexbox和-ms-flex-pack: justify - 或退化使用
position: absolute：给按钮设position: relative，右边元素加position: absolute; right: 12px; top: 50%; transform: translateY(-50%) - 注意：绝对定位方式下，按钮内文本长度变化时，右边元素位置不会自适应，需确保按钮宽度足够或内容稳定
图标字体或 SVG 图标要避免 baseline 对齐错位
用 <i></i> 或 <svg></svg> 做右侧图标时，常出现上下偏移——这是默认的 vertical-align: baseline 导致的。解决方法很简单：
- 给图标加
vertical-align: middle（适用于 inline 元素） - 或统一用
align-items: center（flex 容器已设置，但需确认子元素没被其他样式覆盖） - SVG 若设置了
height但没设vertical-align，仍可能下沉；加display: inline-block+vertical-align: middle更保险
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
