HTML实现多组文本水平同线对齐的解决方案咨询

你原有代码无法实现左右两列对齐的核心原因是woman和Man的字符长度不同，左侧标签没有固定宽度，仅给右侧内容添加固定左 padding 时，右侧文本的起始位置会随左侧标签长度变化，无法对齐。

方案1：使用HTML表格（兼容性最好） #

适合需要规整对齐的场景，代码如下：

<table>
  <tr>
    <td style="width: 60px;">woman</td>
    <td>TextTextTextText</td>
  </tr>
  <tr>
    <td>Man</td>
    <td>TextTextTextText</td>
  </tr>
</table>

方案2：使用Flex布局（语义更灵活） #

适合现代页面开发，无需依赖表格标签：

<div style="display: flex; margin-bottom: 8px;">
  <span style="width: 60px;">woman</span>
  <span>TextTextTextText</span>
</div>
<div style="display: flex;">
  <span style="width: 60px;">Man</span>
  <span>TextTextTextText</span>
</div>

方案3：轻量inline-block方案 #

适合极简场景，代码量最小：

<span style="display: inline-block; width: 60px;">woman</span>TextTextTextText<br>
<span style="display: inline-block; width: 60px;">Man</span>TextTextTextText

以上方案中的60px可以根据你实际需要的左侧标签宽度调整，只要保证所有左侧标签宽度一致，就能实现右侧文本完全对齐的效果，适配性远高于原有给右侧加固定padding的实现。

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