css怎么将span标签设置为固定宽度

发布时间:2021-01-06编辑:脚本学堂
本文介绍了css中将span标签设置为固定宽度的方法,在网页布局过程中,在某些特殊情况下需要将span 标签设置为固定宽度,有需要的朋友参考学习下。

在实际的网页布局过程中,某些特殊情况下需要将span 标签设置为固定宽度,如何实现呢?方法如下。

css <a href=http://www.jb200.com/zt/spanbiaoqian/ target=_blank class=infotextkey>span标签</a> 固定宽度

一、形如<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;}
 

即可实现。