<span>标记的CSS宽度

Question

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

<span>Categories</span>.

我在css中指定了span的背景颜色/图像,宽度和高度.

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

所以,如果我这样做<span></span>,只用css中的背景图像/颜色,就不会出现任何内容.

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

我该如何解决这个问题？

Answer 1

spans默认为内联样式,您无法指定其宽度.

display: inline-block;

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

但是,您可以破解多种浏览器解决方案

Answer 2

您可以将display属性显式设置为"block",因此它的行为类似于块级元素,但在这种情况下,您应该只使用div.

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

Answer 3

您不能使用内联显示指定元素的宽度。您可以在其中放置一些内容，例如不间断的空格（），然后设置填充使其具有更大的宽度，但您无法直接控制它。

您可以使用display inline-block，但是不被广泛支持。

真正的技巧是将图像放入内部，然后设置其宽度。有点像透明的1像素GIF。但是，不建议使用此方法。

Answer 4

你可以尝试width: fit-content

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content