用span实现空格的精确设定 空格

做登录界面的时候，要用到类似

的格式，所以会遇到三个字“用户名”和两个字“密码”对齐的问题，表面上看，只需要在“密”和“码”之间加几个空格就可以了。但是对不同的浏览器，比如IE和Google浏览器，显示出的空格的大小就不同，这样，在一个浏览器中对得很齐的空格，到另一个浏览器中看，就可能错位，从而引起后面的输入框错位；而且对于不同的字体大小，想对齐“用户名”这三个字，加的空格数量也不相同，可能不一定能精确对齐。
<wbr><wbr><wbr>但是，不同浏览器对像素的大小显示的效果是相同的，所以用&lt;span&gt;代替空格，能够精确设定空格的大小。在程序中，一般会遇到很多宽度不同的空格，如果都要用&lt;span&gt;，就要对&lt;span&gt;的样式编号，为了使&lt;span&gt;的样式清晰明确，我用像素的大小来编号，比如：</wbr></wbr></wbr>

CSS：

span.bank2
{
<wbr>padding-left:2px;<br> }<br> span.bank5<br> {<br><wbr>padding-left:5px;<br> }<br> span.bank15<br> {<br><wbr>padding-left:15px;<br> }</wbr></wbr></wbr>

<wbr><wbr><wbr><wbr>这样，在给&lt;span&gt;选择class的时候就很明确。以下是实现方法：</wbr></wbr></wbr></wbr>

html：

<label for="username">用户名：</label>

<label for="password">密<span class="bank15"></span>码：</label>

<wbr><wbr><wbr>最好的方法是将单位“px”换成大小相近的“em”，这样，如果用户在浏览器的工具栏“查看”-》“文字大小”中改变文字大小，文字间的空隙也会相应变化，不影响对齐。</wbr></wbr></wbr>