CSS中如何把中如何把中如何把中如何把Span标签设置为固定宽度标签设置为固定宽度标签设置为固定宽度标签设置为固定宽度 SPAN标签相信对一般的网页设计师来讲是非常熟悉的朋友了，使用相当频繁，但我们往往很少对SPAN设定样式，一般也没什么必要，大多数都留给DIV老朋友了。 今天在实现一个效果中加入了SPAN，因为是用来实现放块效果，所以给它定义了固定宽度，本以为胸有成竹的事，可执行网页时发现设定的宽度没有效果，让我郁闷了几分钟，看似很简单的样式定义尽然是无效 后来网上搜索了相关资料，是怎么解释的： CSS中的width属性并不总是有效的，如果对象是inline对象，width属性就会被忽略。Firefox和IE原来是遵循了标准才这样做的。 原因知道后，解决方案也就出来了，如下代码所示： 一一一一、、、、形如形如形如形如<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;——“全”可定制属性的元素特性； 最佳通用方法最佳通用方法最佳通用方法最佳通用方法：：：：span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px; } 问题解决，希望对正在看着篇文章的你有帮助
