Question

我有一些span标签，我用它来设置一些标题和一些文字在同一行上。

但是我想在奖励类中设置文本的样式，以便在最长的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或table来设置布局。我认为这是一种更简单的方法，并且具有更好的性能。但是我也想用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());
    })
})();

希望这会有所帮助。

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

3 个答案: