<span> 标签的 CSS 宽度

Posted 2023-03-06

【中文标题】<span> 标签的 CSS 宽度

【英文标题】：CSS width of a <span> tag

【发布时间】：2010-10-11 21:45:53

【问题描述】：

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

<span>Categories</span>.

我在 css 中指定 span 的背景颜色/图像、宽度和高度。

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

所以，如果我这样做 <span></span>，在 css 中只有一个背景图像/颜色，什么都不会出现。

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

我该如何解决这个问题？

【问题讨论】：

我只想指出，这并不是对 span 的很好使用。它旨在在更大的整体中标记短范围的内容，因此默认情况下它故意不是块元素。对于标题，最好使用 h# 标签之一。如果做不到这一点，div 通常仍然比 span 好。

感谢您的回答.. :D 我发现这是一个愚蠢的问题。大声笑.. 很多年前了。 = ))

【参考方案1】：

spans 默认为内联样式，不能指定宽度。

display: inline-block;

会是个好办法，只是IE不支持

不过，您可以hack a multiple browser solution

【讨论】：

我相信 IE 至少从版本 6 开始就支持 inline-block。我认为它只支持 inline-block 如果它应用的元素是自然内联的（ 是）。

是的，IE 确实支持 inline-block。它的支持略有不同，但在这种情况下它会起作用。

太棒了！开始了解显示的真正差异：

【参考方案2】：

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

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

【讨论】：

谢谢，我明白了。发生这种情况是因为 span 是内联的。我现在看到了不同的赌注。内联和块显示。是的，div 是合适的。:D..谢谢

在段落、标题（h1、h2 等）中使用 DIV 会破坏验证，如果您关心的话。另一种可能的解决方案是使用跨度，显示：块；和浮动：左； :)

谢谢，下面的答案对于使宽度正常工作至关重要

最好使用inline-block而不是block

【参考方案3】：

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

您可以使用 display inline-block 但这并未得到广泛支持。

真正的技巧是将图像放入其中，然后设置其宽度。类似于透明的 1 像素 GIF。但不是推荐的方法。

【参考方案4】：

我会使用padding 属性。这将允许您在元素的任一侧添加一定数量的像素，而元素不会失去其跨度质量：

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

但是，此方法只会添加到内边距，因此如果您更改内容的长度（例如，从类别更改为标签），内容的大小将发生变化，元素的整体大小也会发生变化。但是如果你真的想设置一个刚性大小，你应该按照上面提到的那样做，并使用一个 div。

有关盒子模型、内容、内边距、边距等的更多详细信息，请参阅box model。

【参考方案5】：

与其他答案一样，使用以下内容开始您的 span 属性：

display:inline-block;  

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

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

当您使用填充时，您的颜色会扩展到两侧（左右），而不仅仅是右侧（如宽度）。

【参考方案6】：

在示例中使用“显示”属性：

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

【参考方案7】：

固定高度和宽度后，如果其中的文本超出其区域，您应该告诉如何处理。所以在css中添加

溢出：自动；

【参考方案8】：

你可以试试width: fit-content

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