CSS中將Span標(biāo)簽設(shè)置為固定寬度的方法

2024-07-11 08:52:33

字體：大中小

供稿：網(wǎng)友

一、形如ABC獨(dú)立行設(shè)置SPAN為固定寬度方法如下：

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

實(shí)際驗(yàn)證結(jié)果：IE6 OK， FIREFOX 3 OK。

一、形如ABCDEF格式行設(shè)置SPAN為固定寬度的方法如下：

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

實(shí)際驗(yàn)證結(jié)果：IE6 OK， FIREFOX 3 OK。

二、形如ABCDEFGH格式行設(shè)置SPAN為固定寬度的方法如下：

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

實(shí)際驗(yàn)證結(jié)果：IE6 OK， FIREFOX 3 OK。

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

block，inline，inline-block的區(qū)別：

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

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

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

補(bǔ)充：

1、如何讓<li>AAABBB</li>里頭的BBB靠右對(duì)齊且不換行？

答：如果對(duì)span使用float屬性，總是導(dǎo)致span換到下一行。可以采用下面方法實(shí)現(xiàn)同行且居右對(duì)齊。

1 li { position:relative;}
2 li span{ position:absolute;right:0px;}

即可實(shí)現(xiàn)。

上一篇：css樣式?jīng)_突問題練習(xí)示例

下一篇：css中filter:alpha透明度使用小結(jié)兼容IE、火狐