CSS:如何内联 3 个元素？左对齐，右对齐 span，左对齐

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/