如何正确对齐<hr>标签下方文本，使其与上方文本匹配？

我明白你的痛点——用硬编码的margin-right来控制文本间距不仅不够灵活，一旦文本内容变化就容易错位，确实属于不够稳健的hack写法。下面给你两个现代CSS的标准解决方案，完美解决对齐问题：

方案一：Flexbox布局（最推荐，灵活易维护） #

Flexbox天生适合处理这种行内元素的对齐和间距控制，只需要把需要对齐的文本放进一个容器，用Flex来管理就行：

修改后的CSS： #

body {
  text-align: center;
}
/* 统一的文本组容器类 */
.text-row {
  display: flex;
  justify-content: center;
  gap: 100px; /* 这里控制两个文本之间的间距，比margin更直观可控 */
}
/* 清除p标签默认的上下外边距，避免多余留白 */
.text-row p {
  margin: 0;
}

对应HTML结构： #

<h1>Example 1</h1>
<!-- 上方文本组 -->
<div class="text-row">
  <p>This is some text</p>
  <p>This is text #2</p>
</div>
<hr>
<!-- 下方文本组，用同一个类保证对齐 -->
<div class="text-row">
  <p>下方对应文本1</p>
  <p>下方对应文本2</p>
</div>

这样不管上下文本的内容长度怎么变，只要用同一个text-row类，就能保证两列文本完全对齐，而且间距是统一控制的，后续要调整间距只需要改gap的值就行，非常方便。

方案二：Grid布局（适合固定列数的场景） #

如果你的文本列数固定（比如就是两列），Grid布局能更精准地控制每一列的位置，对齐效果同样稳定：

CSS代码： #

body {
  text-align: center;
}
.text-grid {
  display: grid;
  grid-template-columns: auto auto; /* 两列宽度自适应内容 */
  justify-content: center;
  column-gap: 100px; /* 列间距 */
}
.text-grid p {
  margin: 0;
}

HTML结构： #

<h1>Example 1</h1>
<div class="text-grid">
  <p>This is some text</p>
  <p>This is text #2</p>
</div>
<hr>
<div class="text-grid">
  <p>下方对应文本1</p>
  <p>下方对应文本2</p>
</div>

为什么原方法不可取？ #

你原来用.push { margin-right: 100px; }的问题在于：

• 这个100px是固定值，如果第一个p标签的文本长度改变，两列文本的对齐关系就会被打破；
• 响应式场景下，固定margin很难适配不同屏幕尺寸；
• 维护成本高，后续要调整间距或者增加文本列，都得逐个修改margin值。

而上面的两种方案都是基于容器的布局逻辑，间距是相对的，对齐规则由容器统一管理，完全符合现代CSS的最佳实践，不存在hack的问题。

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