實現span設置寬度（行內元素本來不支持調寬度高度這些樣式）（變成行內塊元素：display:inline-block;）

一、總結

1、將span從行內元素變成行內快元素就可以調了： 設置樣式的時候加上 display:inline-block; 即可；

 

 

二、CSS中如何把Span標簽設置為固定寬度

本文總結CSS中SPAN標簽的固定寬度設置問題，一般在日志文章標題+日期展示時經常遇到，所以就順便把SPAN幾種組合情況一起匯總一下。包括獨立行固定寬度、同行固定寬度和同行居中固定寬度。關於SPAN標簽浮動靠右對齊方法，目前考慮到兼容IE6前提下，似乎只有反向浮動和相對定位兩種方式（參文末），沒發現更好的方法。

一、形如<span>ABC</span>獨立行設置SPAN為固定寬度

方法如下：

span {width:60px; text-align:center; display:block; }

實際驗證結果：IE6 OK， FIREFOX 3 OK。

測試實例：

<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>
    	<span>天 緣 博 客</span>
</div>

測試結果：

二、形如<span>ABC</span>DEF格式行設置SPAN為固定寬度

方法如下：

span {width:60px; text-align:center;  display:block; float:left;}

實際驗證結果：IE6 OK， FIREFOX 3 OK。

測試實例：

<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>
    	<li><span>天 緣 博 客</span>歡 迎 光 臨</li>
</ul>

測試結果：

三、形如ABC<span>DEF</span>GH格式行設置SPAN為固定寬度

方法如下：

span {width:60px; text-align:center;  display:inline-block;}

實際驗證結果：IE6 OK， FIREFOX 3 OK。

測試實例：

<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>
   	<li>Welcome to <span>天 緣 博 客</span>歡 迎 光 臨</li>
</ul>

測試結果：

提示：完美兼容就是把display屬性設為inline-block，同時也可兼容前兩種情況。

 

四、block，inline，inline-block之間區別

display:block;——類似與DIV標簽的寬高邊距等屬性均可定制的元素特性；

display:inline;——類似與<a>、<strong>標簽的寬高等屬性不可定制的元素特性；

display:inline-block;——“全”可定制屬性的元素特性；

 

五、如何設置讓SPAN float: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;}