如何设置span宽度:1.修改 span 为block 类型并设置float,但这不是完美的解决方法
在span的CSS中增加display属性,将span设置为block类型的Element,这样宽度的确有效了,但把前后文字隔在不同行里面,这样其实span就完全变成了div。
例:span { background-color:#ffcc00; display:block; width:150px;}
很多人会建议再增加一个CSS 属性 float ,这样的确在某种条件下能解决问题。深圳网站工作室提示,如果span前面没有文字 ,那的确是可行的。但是如果有了,前后文字就会连在一起,而span跑到了第二行。
例:span { background-color:#ffcc00; display:block; float:left; width:150px;}
如何设置span宽度:2.将 display:inline -block行写在后面
下面代码的 CSS定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的CSS属性采取忽略处理的态度,所以最好将 display:inline -block行写在后面,这样在Firefox里面,如果到了未来的Firefox 3,这一行就能起作用,代码可以同时兼容各种版本。
例:span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}
一、形如<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;
}