Question

如何设置span宽度？

Answer 1

在span的CSS中增加display属性，将span设置为block类型的Element，这样宽度的确有效了，但把前后文字隔在不同行里面，这样其实span就完全变成了div。

制作网站时发现给span设置宽度会无效，通过查阅CSS2标准中关于width 的定义发现，原来CSS中的 width 属性并不总是有效的，如果对象是 inline 对象，width 属性就会被忽略，Firefox 和 IE 是遵循CSS标准，因而直接设置span宽度会无效

一、初步解决span宽度方案

1、修改span为block类型，在span的css中增加display属性，将span设置为block类型。

• span {
  background-color:#fc0;
  display:block;
  width:150px;
  }

二、进一步解决span宽度方案

1、我们再增加一个css属性float

2、这样的确在某种条件下能解决问题。

• span {
  background-color:#fc0;
  display:block;
  float:left;
  width:150px;
  }

Answer 2

一、形如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 3OK。提示: 完美兼容就是把display属性设为inline-block，同时也可兼容前两种情况。 block，inline，inline-block的区别:display:block;--类似与DIV标签的宽高边距等属性均可定制的元素特性; display:inline;--类似与、标签的宽高等属性不可定制的元素特性;display:inline-block;--“全”可定制属性的元素特性; 补充: 1、如何让AAABBB里头的BBB靠右对齐且不换行?答:如果对span使用float属性，总是导致span换到下一行。可以采用下面方法实现同行且居右对齐。

span自身是个行内元素，不设宽度的，如果要自适应宽度，首先要将行内元素设置为块级元素
span{display:block;}里面的内容是可以自适应的