如何使用HTML/CSS刷新任意长度的两个字符？

我想创建一个工作表，例如两个五位数的数字。使用text-decoration:underline;，我得到类似如下：在div如何使用HTML/CSS刷新任意长度的两个字符？

12345 
+ 12345 
-------

包装和使用

style="width: 8em; margin: 1em; font-family: courier; text-align: right;"

给我类似如下：

12345 
+ 12345 
-------

这是稍微比以前更好。如何完成对齐的数字？要清楚，数字将是相同的长度，但最好的答案是健壮的两个数字的大小m和n其中m不一定等于n，但我愿意交易鲁棒性不需要javascript。

12345 
+ 12345 
------- 
     ^---- align the ones digit

在此先感谢！

来源

2011-02-24 jrhorn424

'文本对齐：权利;'应该是所有你需要你...你确定没有额外的空间，你的后第一个号码？或任何其他干扰的CSS？ – drudge 2011-02-24 21:59:18

这是相当有趣的放在一起：Live Demo。
注意：只能在Firefox上测试！

HTML：

<div class="worksheet"> 
    <span>12345</span> 
    <span class="add">54321</span> 
</div> 

<div class="worksheet"> 
    <span>123</span> 
    <span class="sub">45678</span> 
</div> 

<div class="worksheet"> 
    <span>54321</span> 
    <span class="add">1234</span> 
    <span class="sub">987</span> 
    <span class="add">1357924</span> 
</div>

CSS：

.worksheet { 
    border: 1px dotted #000; 
    display: inline-block; 
    font-family: monospace; 
    margin: 0.5em; 
    padding: 10px; 
    text-align: right; 
} 
.worksheet .add:before { 
    content: "+"; 
    float: left; 
    margin-right: 0.5em; 
} 
.worksheet .sub:before { 
    content: "-"; 
    float: left; 
    margin-right: 0.5em; 
} 
.worksheet span { display: block; } 
.worksheet span:last-child { 
    border-bottom: 2px solid #000; 
    margin-bottom: 1em; 
}

来源

2011-02-24 22:13:46 drudge

+1，整齐，但可能不够健壮（OP使用这个词）就够了。 – thirtydot 2011-02-25 00:36:03

它处理不同大小的数字就好了..至少，我认为这就是OP所说的“健壮”：D – drudge 2011-02-25 00:41:49

也适用于Chrome Beta 10。我喜欢使用内容属性和假选择器！ – jrhorn424 2011-02-25 15:26:39

我删除了width: 8em并添加了float: left。

<div style="float: left; margin: 1em; font-family: courier; text-align: right;"> 
12345<br /> 
+ 66612345<br /> 
------- 
</div>

Live Demo

我感觉我误解了问题，因为这似乎太简单的解决方案:)

来源

2011-02-24 22:02:22 thirtydot

而不是'float：left'，你可以使用'display：inline-block' :)。否则，是的，这是解决方案。 – Felix 2011-02-24 22:05:57

是的，这也工作：http://jsfiddle.net/XckpS/1/（将需要黑客IE7） – thirtydot 2011-02-24 22:07:49

我不知道足够的CSS，所以我可能过度设计我做了一些。对困惑感到抱歉。有浮动或显示属性设置即使很重要如何文本对齐？我远离自己的代码自动取款机，所以我不知道我在做什么错... – jrhorn424 2011-02-25 15:29:37

如何使用HTML/CSS刷新任意长度的两个字符？

回答

相关问题