单行文本左右对齐首选flex布局：父容器设display: flex和justify-content: space-between；兼容老浏览器用table布局；响应式需处理换行与溢出。
html 中单行文本左右对齐的常见错误
直接用 text-align: justify 不起作用，因为单行文本没有换行断点，浏览器不会拉伸空格；用两个 <span></span> 加 Float 又容易塌陷或破坏流式布局——这是最常卡住的地方。
用 display: flex 最稳当
现代页面基本都支持 Flexbox，它天然适合这种“一行内两端定位”的需求：
- 父容器设
display: flex和justify-content: space-between - 左右内容用两个
<span></span>或<div> 包裹，不加额外浮动或定位 <li>避免给子元素设 <code>width: 100%，否则会挤掉间距
<div style="display: flex; justify-content: space-between;"> <span>左边文字</span> <span>右边文字</span> </div>兼容老浏览器时用 table 布局
IE8 及更早版本不支持 Flex，但又不能用 float 搞得父容器高度塌陷——这时候回退到语义弱但稳定的老办法：
- 父容器设
display: table; width: 100% - 两个子元素设
display: table-cell - 右边单元格加
text-align: right
<div style="display: table; width: 100%;"> <span style="display: table-cell;">左边文字</span> <span style="display: table-cell; text-align: right;">右边文字</span> </div>别忘了响应式断点下的表现
在小屏幕上，左右并排可能撑出横向滚动条，或者文字被截断：
立即学习“前端免费学习笔记（深入）”；
- 加
white-space: nowrap防止文字换行（但要确认是否允许溢出） - 用
min-width: 0配合overflow: hidden截断过长文本 - 媒体查询里可切回垂直堆叠：
flex-direction: column+align-items: flex-start
真正麻烦的是混合了图标、按钮、动态长度文本的场景——这时候光靠 CSS 对齐不够，得结合 js 测量宽度做 fallback，但那是另一层问题了。