增加跨度宽度而不是文本宽度 - CSS答案

【问题标题】：Increase span width not with text width - CSS增加跨度宽度而不是文本宽度 - CSS
【发布时间】：2011-05-02 17:26:54
【问题描述】：

我正在尝试增加#Item 的宽度，但它只会随着文本宽度的增加而增加。

HTML

<div><span class="Item">Brand Strategy:</span><span class="Summary">Strategy</span></div>

CSS

.Item{background-color:#000; height:40px; color:#FFF; text-align:center; width:200px;}

如何获得#Item 的指定宽度。

谢谢让

【问题讨论】：

如果我错了，有人纠正我，但我认为跨度不允许有固定的宽度。但是，如果您尝试在跨度之间放置一些空间，它可以有右边距或填充。
@kijin spans 不能有宽度？
显然，内联元素不能有宽度。见stackoverflow.com/questions/257505/css-fixed-width-in-a-span
@kijin 不是要设置文本的宽度，而是要设置跨度。如果你也可以把这个作为答案

标签： css

【解决方案1】：

我在上面的 cmets 中写了一部分，但在这里重写以进一步澄清。

<span> 是一个内联元素。内联元素不能有固定宽度；它们的宽度由它们所包含的文本的宽度以及边距和内边距决定。

见CSS fixed width in a span

您可以通过将 span 转换为块级元素来更改此行为。这是通过设置display: block 或display: inline-block 来完成的。但这也引入了其他行为，例如浮动并占据一整行而不是停留在段落内。这同样可以通过float: left 和类似选项来解决。权衡不同的选项并根据您的需要做出决定。

在您的特定代码示例中，您可能会受益于使用 <dt> 和 <dd> 标记。它们正是为此目的而建造的。

【讨论】：

我想对您所写的内容进行投票，如果解决方案有效，可能会为您提供接受

【解决方案2】：

span 是 inline element，除非您像这样将其设置为 block-level element，否则您不能对其应用宽度或高度：

span.Item{
   display:block;
   background-color:#000;
   height:40px;
   color:#FFF;
   text-align:center;
   width:200px;
}

或者您可以将display 设置为inline-block 以支持旧的哑IE 版本。

更多信息：

Block-Level vs. Inline Elements

或者，如果需要，您可以使用 div 来应用宽度。

【讨论】：

嘿sarfraz，好久不见。
@Jean：是的，在办公室和家里都很忙:)
我用块做了跨度，应用了宽度但不是 w.r.t 200px，默认情况下。但是当添加 .Item 时，css 不适用。

【解决方案3】：

你可以使用display: inline-block，如果你使用display: block，你也必须float: left。

【讨论】：

【解决方案4】：

span 是一个内联元素，所以改变它的宽度的唯一方法是使它成为一个块元素或将它的显示设置为 inline-block。完成此操作后，您应该将其浮动到左侧。

希望对你有所帮助。

【讨论】：

【解决方案5】：

内联元素中的<span> 元素。因此，您不能申请width 或height。

【讨论】：

错误答案，如果设置显示属性（例如块）可以应用宽度/高度
@EugeneMihaylin 请注意：不要因为技术不准确而将帖子标记为“低质量”。