标签的 CSS 宽度答案

【问题标题】：CSS width of a tag 标签的 CSS 宽度
【发布时间】：2010-10-11 21:45:53
【问题描述】：

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

Categories.

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

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

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

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

我该如何解决这个问题？

【问题讨论】：

我只想指出，这并不是对 span 的很好使用。它旨在在更大的整体中标记短范围的内容，因此默认情况下它故意不是块元素。对于标题，最好使用 h# 标签之一。如果做不到这一点，div 通常仍然比 span 好。
感谢您的回答.. :D 我发现这是一个愚蠢的问题。大声笑.. 很多年前了。 = ))

标签： css

【解决方案1】：

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

display: inline-block;

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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

【讨论】：