CSS中如何把Span標籤設定為固定寬度

一、形如<span>ABC</span>獨立行設定SPAN為固定寬度方法如下：

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

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

一、形如<span>ABC</span>DEF格式行設定SPAN為固定寬度的方法如下：

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

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

二、形如ABC<span>DEF</span>GH格式行設定SPAN為固定寬度的方法如下：

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

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

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

 

block，inline，inline-block的區別：

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

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

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

 

補充：

1、如何讓<li>AAA<span>BBB</span></li>裡頭的BBB靠右對齊且不換行。

答：如果對span使用float屬性，總是導致span換到下一行。可以採用下面方法實現同行且居靠右對齊。

li { position:relative;}

li span{ position:absolute;right:0px;}

即可實現。