用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：

<label for="username">使用者名稱：</label>

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

    最好的方法是將單位“px”換成大小相近的“em”，這樣，如果使用者在瀏覽器的工具列“查看”-》“文字大小”中改變文字大小，文字間的空隙也會相應變化，不影響對齊。