html - 对齐跨度彼此并将它们居中

Question

我想显示一个带货币符号的十进制数。
货币和浮点数应小于整数部分。
例如：$ 4,080,048.00 在jsFiddle 中，您可以看到第一行是我想要的样子，但它是用旧的 HTML 样式编写的。
我使用现代 HTML（具有 3 个跨度的 div）做到了这一点，但我在小数点之间有一个空格：$ 4,080,048. 00.
如何使第二行看起来像第一行？

Answer 1

以跨度之间没有空格的方式编写标记将解决问题

<div class="container">
    <span class="currency">$</span>
    <span class="integer">4,080.</span><span class="decimal">53</span>
</div>

或者，如果您不想更改标记，您可以添加font-size:0;到您的容器类

小提琴

.container
{
   font-size:0;
}

另一种选择是在标记中的元素之间添加注释，以使其就像元素一个接一个地编写一样：

小提琴

<div class="container">
    <span class="currency">$</span><!--
    --><span class="integer">4,080.</span><!--
    --><span class="decimal">53</span>
</div>

Answer 2

这是导致此问题的空白

<div class="container">
    <span class="currency">$</span>
    <span class="integer">4,080.</span><span class="decimal">53</span>
</div>

http://jsfiddle.net/yrFeB/2/

我不能在上面的答案中添加评论，但你不应该float: left;用于此目的