如何实现带背景色与无背景色文本的逐字对齐？

问题核心：即便使用等宽字体，<mark>、自定义<span>这类内联元素的背景样式会破坏字符的对齐结构，导致两行无法逐字对应。

最优解决方案：表格布局 #

用表格承载每个字符，让每个字符对应一个独立单元格，确保每个单元格宽度完全一致，无论是否添加背景色，都能实现严格的逐字对齐。

修改后的CSS代码 #

.char-table {
  border-collapse: collapse;
  font-family: monospace;
}
.char-table td {
  padding: 0 2px; /* 可选：调整字符间距 */
}
.bg-blue {
  background-color: skyblue;
}
.bg-green {
  background-color: rgb(109, 221, 109);
}
.bg-red {
  background-color: red;
}
.bg-yellow {
  background-color: yellow;
}

修改后的HTML代码 #

<table class="char-table">
  <!-- 第一行 -->
  <tr>
    <td>5'</td>
    <td> </td>
    <td>U</td>
    <td>U</td>
    <td>U</td>
    <td>U</td>
    <td>U</td>
    <td>C</td>
    <td>U</td>
    <td>A</td>
    <td>U</td>
    <td>U</td>
    <td>U</td>
    <td>A</td>
    <td>G</td>
    <td>U</td>
    <td class="bg-red">|</td>
    <td>U</td>
    <td>U</td>
    <td>U</td>
    <td>U</td>
    <td>C</td>
    <td>U</td>
    <td class="bg-red">|</td>
    <td>G</td>
    <td> </td>
    <td>3'</td>
  </tr>
  <!-- 第二行 -->
  <tr>
    <td>3'</td>
    <td> </td>
    <td>A</td>
    <td>A</td>
    <td>A</td>
    <td>A</td>
    <td>A</td>
    <td class="bg-yellow">A</td>
    <td>A</td>
    <td class="bg-yellow">C</td>
    <td>A</td>
    <td>A</td>
    <td>A</td>
    <td>U</td>
    <td class="bg-blue">U</td>
    <td>A</td>
    <td class="bg-red">|</td>
    <td>A</td>
    <td>A</td>
    <td class="bg-blue">G</td>
    <td class="bg-blue">G</td>
    <td>G</td>
    <td>A</td>
    <td class="bg-red">|</td>
    <td class="bg-green">U</td>
    <td> </td>
    <td>5'</td>
  </tr>
</table>

补充说明 #

1. 每个字符（包括空格、符号）都放在独立的<td>单元格中，从根源保证宽度一致；
2. 用自定义类名替代重复ID（原代码多次使用id='L'违反HTML规范，ID必须唯一）；
3. 表格设置border-collapse: collapse消除单元格间隙，保证对齐紧凑。

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