如何使用CSS替代&nbsp;对齐<p>标签内的文本

当然有啦！用CSS代替 来对齐这类键值对形式的文本要优雅得多，而且后期维护也更方便。根据你给出的HTML结构，我推荐几种实用的方案：

方案1：CSS Grid（最推荐） #

Grid布局天生适合这种行列对齐的场景，只需要给所有p标签套一个容器，就能轻松实现对齐：

修改后的HTML #

<div class="contact-container">
  <p>Website: https://www.helloworld.com</p>
  <p>Email: support@helloworld.com</p>
  <p>Phone: 00-554422000</p>
  <p>Address: Secret Service HQ</p>
  <p>Postal Code: 89509</p>
  <p>City: 3829 Martha Ellen Drive</p>
  <p>Region: Reno, NV</p>
</div>

CSS代码 #

.contact-container {
  display: grid;
  /* 第一列自适应内容宽度，第二列占满剩余空间 */
  grid-template-columns: auto 1fr;
  gap: 8px; /* 可选：给列之间加一点间距 */
}

.contact-container p {
  display: contents; /* 让p标签的内容直接成为Grid的子元素 */
}

这样所有冒号后面的内容都会自动对齐，不管前面的键（比如"Postal Code"）有多长，列宽都会自动调整，非常灵活。

方案2：Flexbox + 固定宽度 #

如果不想修改HTML结构，也可以给每个p标签设置Flex布局，把前面的键部分设置固定宽度：

轻量版CSS（无需改HTML） #

p {
  display: flex;
  gap: 8px;
}

p::before {
  content: attr(data-label);
  width: 120px; /* 根据最长的键设置宽度，比如"Postal Code"的宽度 */
  font-weight: bold; /* 可选：给键加个粗，区分更明显 */
}

注：使用这个CSS的话，需要给每个p标签加data-label属性，比如<p data-label="Website:">...</p>

精准版（推荐） #

如果想避免伪元素的局限性，可以给每个键加个span标签：

<p><span>Website:</span> https://www.helloworld.com</p>
<p><span>Email:</span> support@helloworld.com</p>
<!-- 其他标签同理 -->

对应的CSS：

p span {
  display: inline-block;
  width: 120px;
  font-weight: bold;
}

这个方案适合需要固定键宽度的场景，视觉上更统一。

方案3：轻量文本对齐（临时快速解决） #

还有一种更轻量的方法，适合不想改布局的临时场景：

p {
  text-align: justify;
  text-align-last: justify;
}

p::after {
  content: "";
  display: inline-block;
  width: 100%;
}

不过这个方法的兼容性稍差，对齐效果也不如前两种精准，适合快速临时解决问题。

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