对齐彼此并将它们对齐 [英] Align spans one to each other and center them

问题描述

我想显示带货币符号的十进制数。

货币和浮点数应小于整数部分。

例如： $ 4,080,048.00
在 jsFiddle 中，您可以看到第一行是我想要它，但它是用旧的HTML样式写的。

我用现代的HTML（div有3个跨度），但我有一个十进制之间的空格点： $ 4,080,048。 00 。

如何使第二行看起来像第一行？

I want to show a decimal number with currency sign.
The currency and the floating point number should be smaller that the integer part.
For example: $ 4,080,048.00 In the jsFiddle you can see the first line is how I want it to be, but it is written in old HTML style.
I done that with modern HTML (The div with 3 spans) but I have a space between the decimal point: $ 4,080,048. 00.
How can I make the second line to looks like the first one?

推荐答案

以这样的方式写入标记，即跨度之间没有空格可以解决问题

Write the markup in a way that there is no space between the spans will fix the problem

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

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

Or, if you don't want to change the markup, you could add font-size:0; to your container class

FIDDLE

.container
{
   font-size:0;
}

另一种选择是在标记内的元素之间添加注释好像元素是一个接一个写的：

Yet another option would be to add comments between elements within your markup to make it as if the elements were written one after the other:

FIDDLE

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

这篇关于对齐彼此并将它们对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！