javascript - 当标题长度不同时如何使用CSS对齐html文本

Question

我有一些 span 标签，用于在同一行设置一些标题和一些文本的样式。

但是我想在 award 类中设置文本样式，使其在最长 sub_heading 的长度(即 12 个字符的 Date Awarded)之后排列。是否有 javascript 库或 css 技巧可以做到这一点？

<span class="sub_heading">Award<span class="award">Award Name</span></span>
<span class="sub_heading">Date Awarded<span class="award">2009</span></span>

结果会是:

Award:................................ Award Name(明显没有句号)

授予日期: 2009

Answer 1

在我看来，最好的办法是更改标记，您可以通过多种方式进行更改，这是一个示例:

使用表格的示例

<table style="width:100%">
  <tr>
    <td>Award</td>
    <td>Award name</td> 
  </tr>
  <tr>
    <td>Date awarded</td>
    <td>2000</td> 
  </tr>
</table>