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

Question

我有一个div类heading，其中包含动态生成的文本，我想使用border-bottom为其加下划线。但是，如果我设置.heading {width:auto}，则div会水平填充其容器，并且下划线太长。

如何使div只与包含文本一样长？

http://jsfiddle.net/roLxsw3v/

Answer 1

  

Visual formatting model - 'Inline-block', non-replaced elements in normal flow:

     

如果width为auto，则使用的值为浮动元素的shrink-to-fit宽度。

     

auto或margin-left的计算值margin-right成为0的使用值。

因此，您可以将元素的display更改为inline-block。

这样做时，元素的宽度将"shrink to fit"其内容，在本例中为文本。

Updated Example

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

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

值得指出的是，您可以省略width: auto，因为auto已经是默认值。

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