如何在HTML的<p>与<em>标签中实现文本同列对齐

要实现两行文本中aligntext1和aligntext2对齐到同一列，同时仅给aligntext1设置红色样式，可采用以下几种方法：

方法一：CSS Grid布局（推荐） #

利用Grid的列布局自动对齐，无需手动设置宽度：

<div style="display: grid; grid-template-columns: max-content auto; gap: 8px;">
  <span>tesing12345678910</span>
  <span><em class="text-red-50">aligntext1</em></span>
  <span>tes123</span>
  <span>aligntext2</span>
</div>

方法二：Inline-block固定宽度 #

给每行的前缀文本设置固定宽度，确保对齐：

<div>
  <p>
    <span style="display: inline-block; width: 180px;">tesing12345678910</span>
    <em class="text-red-50">aligntext1</em>
  </p>
  <p>
    <span style="display: inline-block; width: 180px;">tes123</span>
    aligntext2
  </p>
</div>

注：宽度值可根据实际文本长度调整，若想自适应最长文本宽度，可将width改为min-content。

方法三：Flex布局 #

通过Flex实现行内元素的对齐：

<div style="display: flex; flex-direction: column; gap: 4px;">
  <div style="display: flex;">
    <span style="flex-shrink: 0;">tesing12345678910</span>
    <span style="margin-left: 8px;"><em class="text-red-50">aligntext1</em></span>
  </div>
  <div style="display: flex;">
    <span style="flex-shrink: 0;">tes123</span>
    <span style="margin-left: 8px;">aligntext2</span>
  </div>
</div>

注意事项 #

1. 普通HTML中需将className改为class，React环境可保留className；
2. 原代码中的text-read-50应为text-red-50（红色样式类名，推测是笔误）。

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