<span> 標籤是被用來組合文件中的行內元素。相信對一般的網頁設計師來講是非常熟悉的朋友了，使用相當頻繁，但我們往往很少對SPAN設定樣式，一般也沒什麼必要，大多數都留給DIV老朋友了。
在做"善良公社"專案時，用到了SPAN，因為是用來實現放塊效果，所以給它定義了固定寬度，本以為胸有成竹的事，可執行網頁時發現設定的寬度沒有效果，讓我鬱悶了幾分鐘，看似很簡單的樣式定義盡然是無效。後來網上搜索了相關資料，是這麼解釋的：
CSS中的width屬性並不總是有效的，如果物件是inline物件，width屬性就會被忽略。Firefox和IE原來是遵循了標準才這樣做的。
原因知道後，解決方案也就出來了，新增程式碼所示：
style="width:600px;text-align:left;display:inline-block;"
效果對比
下面對<span>標籤進行一下詳細介紹。
原始程式碼：
<style type="text/css">
.sc {
width: 300px;
list-style: none;
font-size: 15px;
} .sc li {
list-style: none;
width: 100%;
margin: 10px 0px 0px 0px;
} .sc span {
width: 100px;
text-align: center;
display: inline-block;
background: #C00;
color: #FFF;
}
</style>
<div class="sa">
<span>張連海</span>
<span>張 連 海</span>
</div>
效果如下：
一、形如<span>ABC</span>獨立行設定SPAN為固定寬度
方法如下：
span {width:60px;text-align:center; display:block; }
測試例項：
<style type="text/css">
.sa span {
width: 100px;
text-align: center;
display: block;
background: #C00;
margin: 10px 0px 0px 0px;
color: #FFF;
font-size: 15px;
}
</style>
<div class="sa">
<span>張連海</span>
<span>張 連 海</span>
</div>
測試效果：
二、形如<span>ABC</span>DEF格式行設定SPAN為固定寬度
方法如下：
span{width:60px; text-align:center; display:block;float:left;}
測試例項：
<style type="text/css">
.sb {
width: 300px;
list-style: none;
font-size: 15px;
} .sb li {
list-style: none;
width: 100%;
margin: 10px 0px 0px 0px;
} .sb span {
width: 100px;
text-align: center;
display:block;
float: left;
background: #C00;
color: #FFF;
}
</style>
<ul class="sb">
<li><span>張連海</span>部落格</li>
<li><span>張 連 海</span>歡 迎 光 臨</li>
</ul>
測試效果：
三、形如ABC<span>DEF</span>GH格式行設定SPAN為固定寬度
方法如下：
span{width:60px; text-align:center; display:inline-block;}
測試例項：
<style type="text/css">
.sc {
width: 300px;
list-style: none;
font-size: 15px;
} .sc li {
list-style: none;
width: 100%;
margin: 10px 0px 0px 0px;
} .sc span {
width: 100px;
text-align: center;
display: inline-block;
background: #C00;
color: #FFF;
}
</style>
<ul class="sc">
<li>Welcome to <span>張連海</span>部落格</li>
<li>Welcome to <span>張 連 海</span>歡 迎 光 臨</li>
</ul>
測試效果：
提示：完美相容就是把display屬性設為inline-block，同時也可相容前兩種情況。
四、block，inline，inline-block之間區別
display:block;——類似與DIV標籤的寬高邊距等屬性均可定製的元素特性；
display:inline;——類似與<a>、<strong>標籤的寬高等屬性不可定製的元素特性；
display:inline-block;——“全”可定製屬性的元素特性；
五、如何設定讓SPANfloat:right不換行
1、如何讓<li>AAA<span>BBB</span></li>裡頭的BBB靠右對齊且不換行？
如果對span使用float屬性，在IE6下會導致span換到下一行，Firefox則正常。可以採用下面相對定位方法實現同行且居右對齊，即可實現。
li {position:relative;}
li span{position:absolute;right:0px;}
2、反著寫<span>也比較方便
比如寫做<li><span>AAA</span>BBB</li>，這樣把AAA放到SPAN裡，BBB放到外面。只需要：
li {text-align:right;}
li span{float:left;}