做登錄界面的時(shí)候，要用到類(lèi)似

的格式，所以會(huì)遇到三個(gè)字“用戶名”和兩個(gè)字“密碼”對(duì)齊的問(wèn)題，表面上看，只需要在“密”和“碼”之間加幾個(gè)空格就可以了。但是對(duì)不同的瀏覽器，比如IE和Google瀏覽器，顯示出的空格的大小就不同，這樣，在一個(gè)瀏覽器中對(duì)得很齊的空格，到另一個(gè)瀏覽器中看，就可能錯(cuò)位，從而引起后面的輸入框錯(cuò)位；而且對(duì)于不同的字體大小，想對(duì)齊“用戶名”這三個(gè)字，加的空格數(shù)量也不相同，可能不一定能精確對(duì)齊。
????但是，不同瀏覽器對(duì)像素的大小顯示的效果是相同的，所以用<span>代替空格，能夠精確設(shè)定空格的大小。在程序中，一般會(huì)遇到很多寬度不同的空格，如果都要用<span>，就要對(duì)<span>的樣式編號(hào)，為了使<span>的樣式清晰明確，我用像素的大小來(lái)編號(hào)，比如：

CSS：

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

????這樣，在給<span>選擇class的時(shí)候就很明確。以下是實(shí)現(xiàn)方法：

html：

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

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

????最好的方法是將單位“px”換成大小相近的“em”，這樣，如果用戶在瀏覽器的工具欄“查看”-》“文字大小”中改變文字大小，文字間的空隙也會(huì)相應(yīng)變化，不影響對(duì)齊。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。