Javascript 标题长度不同时如何使用css对齐html文本

我有一些跨距标记，我用它在同一行上设置一些标题和文本的样式

但是，我想在award类中设置文本样式，使其在最长的sub_标题长度之后对齐，该标题的日期为12个字符。是否有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>

它最终会：

奖项：……奖项名称无明显句号

---

授予日期：2009年

在我看来，最好的办法是更改标记，您可以通过多种方式进行更改，例如：

使用表格的示例

---

如果稍微更改标记，可以使用display:table来实现此效果

包装纸{ 显示：表格； } .行{ 显示：表格行； } 跨度{ 显示：表格单元格； } .奖励{ 文本对齐：右对齐； } 获奖者姓名 获奖日期2009

---

您可以使用css或表格来设置布局。我认为这是一种更简单的方法，并且有更好的性能。但是我还想为您提供另一种使用javascript的方法，您可以找出适合您的情况的最佳方法。以下是工作示例： 主要代码如下：

(function() {
    var maxWidth = 0;
    $.each($(".sub_heading"), function() {
        maxWidth = Math.max(maxWidth, $(this).width());
    })

    $.each($(".sub_heading"), function() {
        $(this).css("padding-right", maxWidth - $(this).width());
    })
})();

希望这会有所帮助

(function() {
    var maxWidth = 0;
    $.each($(".sub_heading"), function() {
        maxWidth = Math.max(maxWidth, $(this).width());
    })

    $.each($(".sub_heading"), function() {
        $(this).css("padding-right", maxWidth - $(this).width());
    })
})();