CSS <span>标签的宽度

Question

在我的模块标题中，我使用了 <span> 标签，例如：

<span>类别</span>。

我在 CSS 中指定了 Span 的背景颜色/图片、宽度和高度。

但是，Span 的宽度取决于其内容/文本。

因此，如果我只在 CSS 中设置了背景图像/颜色：<span></span>，则没有任何内容显示。

当然，我想要显示一些内容。

我该如何解决这个问题？

- bgreen1989

---

我想指出的是，这不是 span 标签的一个很好的应用。它的作用是标记大块内容中的短范围内容，因此默认情况下它故意不是块元素。对于标题，最好使用 h# 标签之一。如果没有，div 比 span 通常更好。 - Chuck

感谢您的回答.. :D 我觉得这是一个很傻的问题。哈哈..已经过去这么多年了。=)) - mars-o

Answer 1

元素默认具有内联样式，您无法指定其宽度。

display: inline-block;

这是一个不错的方法，但IE浏览器不支持。

不过，你可以通过使用多种浏览器的Hack解决方案来处理。

- cobbal

---

我相信IE从6版本开始就支持inline-block。我认为它仅支持自然内联元素应用于其上的inline-block（例如<span>） 。 - Ken Browning

是的，IE也支持inline-block。虽然它的支持方式略有不同，但在这种情况下可以使用。 - thomasrutter

太棒了！开始理解显示方面的真正差异。 - Dean Meehan

Answer 2

您可以将显示属性显式设置为“block”，以使其行为像块级元素，但在这种情况下，您可能应该使用div。

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

- cxfx

---

谢谢，我明白了。那是因为 span 是内联元素。我现在看到了内联和块级显示之间的区别。是的，div 是合适的。：D..谢谢 - mars-o

如果您在意验证，将 DIV 放置在段落和标题（h1、h2 等）内会破坏验证。另一个可能的解决方案是使用 span，设置 display:block; 和 float:left; :) - Arve Systad

谢谢，下面的答案对于让宽度正常工作非常关键。 - Satchel

最好使用inline-block而不是block。 - Eugen Konkov

Answer 3

在display为inline的元素中，无法直接指定其宽度。可以在其中放置像非断空格( )这样的内容，然后设置padding以增加它的宽度，但不能直接控制它。

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

一个真正的hack是将图像放在内部，然后设置它的宽度。类似于透明的1像素GIF。但这不是推荐的方法。

- cletus

Answer 4

像其他答案中一样，从这里开始设置您的属性：

display:inline-block;  

现在您可以使用填充超过宽度：

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

当您使用填充时，颜色会向两侧（右侧和左侧）扩展，而不仅仅是向右扩展（就像宽度一样）。

- Nohy bez hranic

Answer 5

你可以尝试使用 width: fit-content。

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

- Daniela

Answer 6

我会使用 padding 属性。这将允许您在元素的两侧添加一组像素，而不会使元素失去其跨度特性：

- 它不会变成块 - 它会像您期望的那样浮动

但是，此方法只会添加填充，因此如果您更改内容的长度（例如从“类别”更改为“标签”），则内容的大小将发生变化，元素的整体大小也将发生变化。但是，如果您真的想设置严格的大小，应按上述方法使用 div。

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

- Kelly Hays

Answer 7

使用示例中的属性"display"，如下所示：

使用属性'display'，如下所示：

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

- Antonio

Answer 8

固定高度和宽度后，您需要告诉元素在内部文本溢出时如何表现。因此，在CSS中添加以下内容：

overflow: auto;

- user2130923