欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

span元素的width问题

程序员文章站 2022-05-04 23:41:19
...

 

最近遇到一个问题,无法为span元素设置width属性。查看CSS文档得知,浏览器会忽略行内元素(inline,或称:内联元素)的width属性。

网上给出的一种解决方法:

span { background-color:#f00; display:block; width:200px;}

但是这样会使 span 和它前后的元素分属两行,也就是说 span 其实是变成类似 div 的块级 (block)元素。

另一种解决方案(在上面的基础上增加左浮动):

span { background-color:#f00;display:block; float:left; width:200px;}
 但是这时,span后的文字就需要增加清理,否则span前后的文字就会连在一行内。

最终完美的解决方案:

span { background-color:#f00; display:-moz-inline-box; display:inline-block; width:200px;}
 

display:inline-block,意思是将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。这个属性在 Firefox3 beta、IE8 beta、Opera、Safari 中得到支持。Firefox中有私有属性Firefox 下却有私有属性 -moz-inline-box 可是实现“神似”的功能(不完美,会有后遗问题,比如 text-align 不好用,需要用 -moz-box-align 来调整。感谢 怿飞 的 文章《display:inline-block的深入理解》)。

相关标签: css span width