将Html中的字符串与不同长度对齐

Question

在Html段落中，我需要在多行中组合一个字符串，以便让冒号在不同的行中对齐 （自然地使用等宽字体）。

ShortString      : 1.0
LoooongString    : 2.0
VeryloooongString: 3.0

我需要在冒号前设置固定宽度：此宽度是3个字符串中的最大值。

Answer 1

以下是使用table和最小样式的简单示例。

.data {
  font-family: monospace;
}

.data td:last-child:before {
  content: ': '
}

<table class="data">
  <tr>
    <td>ShortString</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>LoooongString</td>
    <td>2.0</td>
  </tr>
  <tr>
    <td>VeryloooongString</td>
    <td>3.0</td>
  </tr>
</table>