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

Question

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

但是，我想在Award类中设置文本样式，以使其在最长的sub_heading（即授予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年

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>

Answer 2

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

 #wrapper { display: table; } .row { display: table-row; } span { display: table-cell; } .award { text-align: right; } 

 <div id="wrapper"> <div class="row"><span class="sub_heading">Award</span><span class="award">Award Name</span></div> <div class="row"><span class="sub_heading">Date Awarded</span><span class="award">2009</span></div> </div> 

Answer 3

您可以使用CSS或表格来设置布局。 我认为这是一种更简单的方法，并且具有更好的性能。 但我也想为您提供另一种使用javascript的方法，您可以弄清楚哪种方法最适合您的情况。 这是工作示例： https : //jsfiddle.net/b8063z7c/主要代码是这样的：

(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());
    })
})();

希望这会有所帮助。