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

Question

我正在尝试增加#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的指定宽度。

由于 让

Answer 1

我在上面的评论中写了部分内容，但在此重写以进一步澄清。

<span>是一个内联元素。内联元素不能有固定的宽度;它们的宽度取决于它们包含的文本的宽度，加上边距和填充。

请参阅CSS fixed width in a span

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

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

Answer 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来应用宽度。

Answer 3

您可以使用display: inline-block，如果您使用display: block，则还需要float: left。

Answer 4

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

我希望这会有所帮助。

Answer 5

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