如何使用CSS和React实现同一水平线div的相对左右对齐

问题核心 #

• 目标：同一水平层级的文本，部分左对齐、其余右对齐，所有内容包裹在同一个<p>标签内
• 异常表现：直接给父元素设置右对齐属性后，所有内容统一右对齐，无法拆分排版
• 核心误区：不要直接给<p>标签设置text-align: right，该属性会控制容器内所有行内内容的对齐方向，无法实现同行内容拆分对齐，必须通过布局规则控制子元素位置

推荐实现方式（兼容React场景） #

方案1：Flex布局（首选，兼容性强、代码量小） #

不需要改动原有DOM层级，只需要给左右内容分别加类名标识，通过弹性布局的自动边距实现右推效果。
React示例代码：

export default function TextAlignDemo() {
  return (
    <div className="page">
      {/* 单个p标签包裹所有内容 */}
      <p className="split-align-row">
        <span className="left-content">这是需要左对齐的文本内容</span>
        <span className="right-content">这是需要右对齐的文本内容</span>
      </p>
    </div>
  )
}

对应CSS代码：

.split-align-row {
  /* 开启弹性盒布局 */
  display: flex;
  /* 文本垂直居中，适配两侧字号不同的场景 */
  align-items: center;
  /* 清除p标签默认外边距，可根据设计稿调整 */
  margin: 0.5rem 0;
}
.right-content {
  /* 左侧边距自动填充剩余空间，将元素推至行尾 */
  margin-left: auto;
}

该方案支持任意长度的左右文本，当文本总宽度超过容器宽度时，会自动按内容换行，不会出现布局错乱。

方案2：Grid布局（适合多列对齐场景） #

如果后续同一行需要多段不同对齐规则的内容，用网格布局逻辑更清晰：

.split-align-row {
  display: grid;
  /* 定义两列：第一列宽度跟随内容，第二列占满剩余宽度 */
  grid-template-columns: auto 1fr;
  margin: 0.5rem 0;
}
.right-content {
  /* 第二列内容右对齐 */
  text-align: right;
}

响应式适配（可选） #

如果需要在移动端自动换行堆叠，只需要补充媒体查询即可：

@media (max-width: 768px) {
  .split-align-row {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .right-content {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
}

内容的提问来源于stack exchange，提问作者Saurav Chittal