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

2024-11-17 13:51:24
推荐回答(2个)
回答1:

  由于span是行内元素,所以如果想要给它设置固定的宽度,需要先将其转换为块状元素,之后就可以为其设置固定的宽度了,如span {display:block; width: xxx px; }。
  请记住,任何的行内元素,都是不能对其进行宽高设置,它的高度只随着字体大小和行高而改变,而它的宽度只随着文本内容的宽度而改变,所以要设置行内元素的宽高值,将其转换为块状元素是最基本的方法。
至于什么是块状元素,什么是行内元素,它们之间有什么关系,可以直接百度,快速 了解一下。以上是个人的一些学习积累,又不对的地方,请见谅。

回答2:

一、形如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。二、形如ABCDEFGH格式行设置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;——“全”可定制属性的元素特性; 补充:1、如何让

  • AAABBB
  • 里头的BBB靠右对齐且不换行?答:如果对span使用float属性,总是导致span换到下一行。可以采用下面方法实现同行且居右对齐。li { position:relative;}li span{ position:absolute;right:0px;}即可实现。