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中的最大位數，則可以將其顯示設置為inline-block，然后設置其寬度。

如果您不知道它的最大寬度，那么您應該使用實際的表格代替。

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

Answer 3

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

span.amount {
  width: 100px;
}