文本对齐不适用于span

Question

我需要下面的对齐。我可以使用表来实现这一点，但我想要一个不使用表的解决方案。

  Sub Total  $596.00
   Shipping  $35.00
        Tax  $63.11
Order Total  $694.11

当我不使用表时它看起来像下面，即使我使用text-align：right作为第一个span元素。

Sub Total    $596.00
Shipping     $35.00
Tax          $63.11
Order Total  $694.11

Answer 1

您可以将inline-block和first-child用于align并添加padding。

这样的事情：

＆＃13;

＆＃13;

#container > div > div {
    display:inline-block;
    min-width:75px;
}

#container > div > div:first-child {
    text-align:right;
    padding-right:10px;
}

＆＃13;

<div id="container">
    <div>
        <div>Sub Total</div>
        <div>$596.00</div>
    </div>
    <div>
        <div>Shipping</div>
        <div>$35.00</div>
    </div>
    <div>
        <div>Tax</div>
        <div>$63.11</div>
    </div>
    <div>
        <div>Order Total</div>
        <div>$694.11</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

text-align不适用于内联元素。尝试设置display：inline-block或display：block to span元素。