一个<span>标签的CSS宽度

我在模块标题中使用<span>标签,例如

<span>Categories</span>.

我指定跨度的背景颜色/图像,宽度和高度在CSS中。

但跨度的宽度取决于其内容/文本。

所以,如果我做<span></span> ,在css中只有背景图像/颜色,则不会显示任何内容。

当然,我想要出现一些东西。

我该如何解决这个问题?

你可以明确地将display属性设置为“block”,所以它的行为就像块级元素,但是在这种情况下,你可能应该使用div来代替。

 <span style="display:block; background-color:red; width:100px;"></span> 

跨越默认内联样式,你不能指定的宽度。

 display: inline-block; 

将是一个好方法,除了IE不支持它

但是,您可以使用多浏览器解决scheme

你不能用inline指定元素的宽度。 你可以把东西放进去,就像一个非破坏性的空间(),然后设置填充来给它更多的宽度,但是你不能直接控制它。

你可以使用display inline-block,但是这并没有得到广泛的支持。

一个真正的黑客将是把一个图像内,然后设置的宽度。 像一个透明的1像素的GIF。 不是推荐的方法。

使用属性“display”,如下例所示:

 <span style="background: gray; width: 100px; display:block;">hello</span> <span style="background: gray; width: 200px; display:block;">world</span> 

我会使用padding属性。 这将允许您在元素的任一侧添加一组像素,而不会丢失其跨度品质:

  • 它不会成为一个块
  • 它会浮动,如你所料

然而,这个方法只会添加到填充中,所以如果你改变内容的长度(例如从Categories到Tags),内容的大小将会改变,并且元素的整体大小也会改变。 但是,如果你真的想设置一个刚性的大小,你应该如上所述,使用div。

有关框模型,内容,填充,边距等的更多详细信息,请参阅框模型 。

就像其他答案一样,用这个开始你的跨度属性:

 display:inline-block; 

现在你可以使用宽度以上的填充

 padding-left:6%; padding-right:6%; 

当你使用填充时,你的颜色会扩展到两侧 (右侧和左侧),而不仅仅是右侧(如widht)。

确定了高度和宽度后,你可以告诉如果它里面的文字溢出了它的面积。 所以添加在CSS中

溢出:自动;