将div设置为包含文本的宽度？

Question

我有一个heading包含动态生成的文本的div类,我想用a来强调它border-bottom.但是,如果我设置.heading {width:auto}然后div水平填充其容器,并且下划线太长.

我怎样才能使div只与包含文本一样长？

http://jsfiddle.net/roLxsw3v/

Answer 1

视觉格式化模型 - '内联块',正常流程中未替换的元素:

如果width是auto,则使用的值是浮动元素的收缩到适合宽度.

计算值为autofor margin-left或margin-right成为使用值0.

因此,您可以display将元素更改为inline-block.

在这样做时,元素的宽度将"缩小以适应"其内容,在本例中为文本.

更新的示例

.heading {
    background: blue;
    display: inline-block;
}

<div class="heading">text</div>

值得指出的是,你可以省略,width: auto因为auto它已经是默认值.

显然,您也可以将元素的类型从a更改div为a span,inline默认情况下.