html一行字如何显示两边分开显示

单行文本左右对齐首选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 搞得父容器高度塌陷——这时候回退到语义弱但稳定的老办法：


SuperCms在线订餐系统
模板采用响应式设计，自动适应手机，电脑及平板显示；满足单一店铺外卖需求。功能：1.菜单分类管理2.菜品管理：菜品增加，删除，修改3.订单管理4.友情链接管理5.数据库备份6.文章模块：如：促销活动，帮助中心7.单页模块：如：企业信息，关于我们更强大的功能在开发中……安装方法：上传到网站根目录，运行http://www.***.com/install 自动
下载
• 父容器设 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，但那是另一层问题了。