Question

I want to display a table with figures aligned in a non-fixed-width font:

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

And I’d like the dollar figures to all just be inline spans:

<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)

But I can’t quite work out the CSS to make this work. Can you help?

Answer 1

Something like this?

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

http://jsfiddle.net/A72hM/