html - スパンを互いに整列させて中央揃えにする

Question

通貨記号付きの 10 進数を表示したい。
通貨と浮動小数点数は、整数部分よりも小さくする必要があります。
例: jsFiddle$ 4,080,048.00 では、最初の行が私が望んでいた方法であることがわかりますが、古い HTML スタイルで書かれています。 私は最新の HTML (3 スパンの div) でそれを行いましたが、小数点の間にスペースがあります: . 2行目を最初の行のようにするにはどうすればよいですか?
$ 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;、この目的には使用しないでください