[整理版]css中若何把span标签设置为固定宽度
CSS中如何把Span标签设置为固定宽度
SPAN标签相信对一般的网页设计师来讲是非常熟悉的朋友了,使用相当频繁,但我们往往很少对SPAN设定样式,一般也没什么必要,大多数都留给DIV老朋友了。
今天在实现一个效果中加入了SPAN,因为是用来实现放块效果,所以给它定义了固定宽度,本以为胸有成竹的事,可执行网页时发现设定的宽度没有效果,让我郁闷了几分钟,看似很简单的样式定义尽然是无效
后来网上搜索了相关资料,是怎么解释的:
CSS中的width属性并不总是有效的,如果对象是inline对象,width属性就会被忽略。Firefox和IE原来是遵循了
才这样做的。
原因知道后,解决
也就出来了,如下代码所示:
一、形如
ABC独立行设置SPAN为固定宽度方法如下:
span,,,,,{width:60px;,,,,,text-align:center;,,,,,display:block;,,,,,} 实际验证结果:IE6,,,,,OK,,,,,,FIREFOX,,,,,3,,,,,OK。 一、形如
ABCDEF格式行设置SPAN为固定宽度的方法如下:
span,,,,,{width:60px;,,,,,text-align:center;,,,,,,,,,,display:block;,,,,,float:left;}
实际验证结果:IE6,,,,,OK,,,,,,FIREFOX,,,,,3,,,,,OK。 二、形如ABC
DEFGH格式行设置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;——类似与
、标签的宽高等属性不可定制的元素特性;
display:inline-block;——“全”可定制属性的元素特性; ,,,,,
最佳通用方法:span,,,,,{
background-color:#ffcc00;
display:-moz-inline-box;
display:inline-block;
width:150px;
}
问题解决,希望对正在看着篇文章的你有帮助~
补充:
1、如何让AAABBB里头的BBB靠右对齐且不换行,
答:如果对span使用float属性,总是导致span换到下一行。可以采用下面方法实现同行且
居右对齐。
li,,,,,{,,,,,position:relative;}
li,,,,,span{,,,,,position:absolute;right:0px;} 即可实现。