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的深入理解》)。
上一篇: [Android]【安卓】xml selector的使用
下一篇: new Image 读取宽高为0