CSS：我如何内联3个元素？左对齐，右对齐跨度，左对齐

Question

我想显示一个表格，其中的数字以非固定宽度字体对齐：

$2,280
$  300 (total discount)
$   10 (add-on fee)

我希望所有美元数字都是内联跨度：

<span class='dollar'>$</span><span class='amount'>2,280</span>
<span class='dollar'>$</span><span class='amount'>300</span> (total discount)
<span class='dollar'>$</span><span class='amount'>10</span> (add-on fee)

但我无法完成CSS的工作。你能帮忙吗？

Answer 1

这样的东西？

.amount {
    display: inline-block;
    width: 100px;
    text-align: right;
}

http://jsfiddle.net/A72hM/

Answer 2

如果你知道.amount中的最大位数，那么你可以将它的显示设置为内联块，然后设置它的宽度。

如果您不知道它的最大宽度，那么您应该使用实际的表格。

两种方法的示例：http://jsfiddle.net/ZbB8K/

Answer 3

我相信你需要给span.amount一个固定的宽度。

span.amount {
  width: 100px;
}