做登錄界面的時候，要用到類似

的格式，所以會遇到三個字“用戶名”和兩個字“密碼”對齊的問題，表面上看，只需要在“密”和“碼”之間加幾個空格就可以了。但是對不同的瀏覽器，比如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”，這樣，如果用戶在瀏覽器的工具欄“查看”-》“文字大小”中改變文字大小，文字間的空隙也會相應變化，不影響對齊。

總結

以上是生活随笔為你收集整理的用span实现空格的精确设定 空格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。