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

我相信你需要給span.amount一個固定的寬度。

span.amount { 
    width: 100px; 
} 

Answer 3

如果你知道在.amount位數最高金額，那麼你可以設置它的顯示內聯塊，然後設置它的寬度。

如果你不知道它是最大寬度，那麼你應該使用一個實際的表。

這兩種方法的例子：http://jsfiddle.net/ZbB8K/