CSS中如何把Span标签设置为固定宽度

html-css010

CSS中如何把Span标签设置为固定宽度,第1张

由于span是行内元素,所以如果想要给它设置固定的宽度,需要先将其转换为块状元素,之后就可以为其设置固定的宽度了,如span {display:blockwidth: xxx px}。

请记住,任何的行内元素,都是不能对其进行宽高设置,它的高度只随着字体大小和行高而改变,而它的宽度只随着文本内容的宽度而改变,所以要设置行内元素的宽高值,将其转换为块状元素是最基本的方法。

至于什么是块状元素,什么是行内元素,它们之间有什么关系,可以直接百度,快速 了解一下。以上是个人的一些学习积累,又不对的地方,请见谅。

最近制作网站时发现给span设置宽度会无效,通过查阅CSS2标准中关于width 的定义发现,原来CSS中的 width 属性并不总是有效的,如果对象是 inline 对象,width 属性就会被忽略,Firefox 和 IE 是遵循CSS标准,因而直接设置span宽度会无效。在span的CSS中增加display属性,将span设置为block类型的Element,这样宽度的确有效了,但把前后文字隔在不同行里面,这样其实span就完全变成了div。例:span { background-color:#ffcc00display:blockwidth:150px}很多人会建议再增加一个CSS 属性 float ,这样的确在某种条件下能解决问题。深圳网站工作室提示,如果span前面没有文字 ,那的确是可行的。但是如果有了,前后文字就会连在一起,而span跑到了第二行。例:span { background-color:#ffcc00display:blockfloat:leftwidth:150px}下面代码的 CSS定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的CSS属性采取忽略处理的态度,所以最好将 display:inline -block行写在后面,这样在Firefox里面,如果到了未来的Firefox 3,这一行就能起作用,代码可以同时兼容各种版本。例:span { background-color:#ffcc00display:-moz-inline-boxdisplay:inline-blockwidth:150px}当新建HTML时加上了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "