HTML/CSS如何实现多行文本右侧内容从相同位置对齐？

实现方案 #

以下提供3种常用实现方式，可根据你的实际场景选择： #

方案1：使用表格（最推荐，语义清晰、适配性强） #

适合内容本身就是两列对应关系的场景，无需复杂CSS配置：

<!-- HTML结构 -->
<table class="align-table">
  <tr>
    <td>abcdefgeh</td>
    <td>aaaaa</td>
  </tr>
  <tr>
    <td>sudbaufsfowu</td>
    <td>aaaaa</td>
  </tr>
  <tr>
    <td>subbfdb</td>
    <td>aaaaa</td>
  </tr>
  <tr>
    <td>ubsudfbfo</td>
    <td>aaaaa</td>
  </tr>
  <tr>
    <td>isnidfnfin</td>
    <td>aaaaa</td>
  </tr>
  <tr>
    <td>isndindinsin</td>
    <td>aaaaa</td>
  </tr>
</table>

/* CSS样式 */
.align-table {
  border-collapse: collapse;
  /* 不需要表格边框可以保留默认，需要边框可自行加border属性 */
}
.align-table td:first-child {
  padding-right: 20px; /* 调整两列之间的间距 */
  /* 如果需要固定第一列宽度可加 width: 120px; 数值根据最长左列内容调整即可 */
}

方案2：使用CSS Grid（无表格标签，更灵活） #

适合不想用表格标签的场景，布局自由度更高：

<!-- HTML结构 -->
<div class="align-grid">
  <div class="row"><span>abcdefgeh</span><span>aaaaa</span></div>
  <div class="row"><span>sudbaufsfowu</span><span>aaaaa</span></div>
  <div class="row"><span>subbfdb</span><span>aaaaa</span></div>
  <div class="row"><span>ubsudfbfo</span><span>aaaaa</span></div>
  <div class="row"><span>isnidfnfin</span><span>aaaaa</span></div>
  <div class="row"><span>isndindinsin</span><span>aaaaa</span></div>
</div>

/* CSS样式 */
.align-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px; /* 列间距 */
}
.align-grid .row {
  display: contents; /* 让内部span直接继承grid布局规则 */
}

方案3：保留原有pre/code结构 #

如果不想修改原有<pre><code>的结构，可给左半部分内容套行内块标签实现对齐：

<!-- HTML结构 -->
<pre><code>
<span class="left">abcdefgeh</span>aaaaa
<span class="left">sudbaufsfowu</span>aaaaa
<span class="left">subbfdb</span>aaaaa
<span class="left">ubsudfbfo</span>aaaaa
<span class="left">isnidfnfin</span>aaaaa
<span class="left">isndindinsin</span>aaaaa
</code></pre>

/* CSS样式 */
code {
  font-family: monospace; /* 必须用等宽字体保证宽度计算准确 */
}
.left {
  display: inline-block;
  min-width: 120px; /* 数值调整到能容纳最长的左半部分内容即可 */
}

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