增加跨度宽度而不是文本宽度 - 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>是一个内联元素.内联元素不能有固定的宽度; 它们的宽度取决于它们包含的文本的宽度,加上边距和填充.

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

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

Answer 2

这span是内联元素，您不能对其应用宽度或高度，除非您将其设置为块级元素，如下所示：

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

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

更多信息：

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