用span实现空格的精确设定

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

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

CSS：

span.bank2
{
 padding-left:2px;
}
span.bank5
{
 padding-left:5px;
}
span.bank15
{
 padding-left:15px;
}

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

html：

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

<labelfor="password">密<spanclass="bank15"></span>码：</label>

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