标签是被用来组合文档中的行内元素。相信对一般的网页设计师来讲是非常熟悉的朋友了，使用相当频繁，但我们往往很少对SPAN设定样式，一般也没什么必要，大多数都留给DIV老朋友了。
在做"善良公社"项目时，用到了SPAN，因为是用来实现放块效果，所以给它定义了固定宽度，本以为胸有成竹的事，可执行网页时发现设定的宽度没有效果，让我郁闷了几分钟，看似很简单的样式定义尽然是无效。后来网上搜索了相关资料，是这么解释的：
CSS中的width属性并不总是有效的，如果对象是inline对象，width属性就会被忽略。Firefox和IE原来是遵循了标准才这样做的。
原因知道后，解决方案也就出来了，添加代码所示：
style="width:600px;text-align:left;display:inline-block;"
效果对比
下面对标签进行一下详细介绍。
原始代码：
张连海 张 连 海
效果如下：
<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPC9ibG9ja3F1b3RlPgo8cD48c3Ryb25nPtK7oaLQzsjnPHNwYW4+QUJDPC9zcGFuPrbAwaLQ0Mno1sNTUEFOzqq5zLaov+22yDwvc3Ryb25nPjwvcD4KPHA+ICAgILe9t6jI58/Co7o8L3A+CjxibG9ja3F1b3RlPgo8cD48L3A+CjxibG9ja3F1b3RlPgo8cD48cHJlIGNsYXNzPQ=="brush:java;">span {width:60px;text-align:center; display:block; }
测试实例：
张连海 张 连 海
测试效果：
二、形如ABCDEF格式行设置SPAN为固定宽度
方法如下：
span{width:60px; text-align:center; display:block;float:left;}
测试实例：
- 张连海博客
- 张 连 海欢 迎 光 临
测试效果：
三、形如ABCDEFGH格式行设置SPAN为固定宽度
方法如下：
span{width:60px; text-align:center; display:inline-block;}
测试实例：
- Welcome to 张连海博客
- Welcome to 张 连 海欢 迎 光 临
测试效果：
提示：完美兼容就是把display属性设为inline-block，同时也可兼容前两种情况。
四、block，inline，inline-block之间区别
display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性；
display:inline;——类似与、标签的宽高等属性不可定制的元素特性；
display:inline-block;——“全”可定制属性的元素特性；
五、如何设置让SPANfloat:right不换行
1、如何让
如果对span使用float属性，在IE6下会导致span换到下一行，Firefox则正常。可以采用下面相对定位方法实现同行且居右对齐，即可实现。
li {position:relative;} li span{position:absolute;right:0px;}
2、反着写也比较方便
比如写做
li {text-align:right;} li span{float:left;}
