<style> span { display: inline-block; } #left { text-align: left; } #right { text-align: right; } </style> <div style="width: 100px; height: 30px; overflow:hidden; "> <span id="left"></span> <span id="right"></span> </div> /* 条件 */ #left 与 #right 的父元素, 定宽定高 #left 与 #right 都是不确定长度的纯文字 /* 预期 */ #right 需要完整显示 #left 需要将 #right 未填充满的部分填充满, 超出部分 text-overflow /* 例如 */ <----------------> |asdfasdfas...|V5| <----------------> |asdfasdf...|V5V6| <----------------> /* answer */ 经过@P233指点 将#left写在#right后面, 通过浮动#right, 让#left自动计算右侧margin即可 <style> span { display: inline-block; } #left { text-align: left; overflow: hidden; } #right { text-align: right; float: right; } </style> <div style="width: 100px; height: 30px; overflow:hidden; "> // 注意不要有换行符, 不然出现inline-block的3px <span id="right"></span><span id="left"></span> </div>