Div宽度不会随着内容的增加而增加

Question

在我的应用程序中，我的标签可以是5到15个字符。由于这个原因，标签宽度不同，但周围的divs随着父母的宽度增加而不是内容。

我应该在CSS中添加什么来使divs宽度适应其内容的宽度？

提前致谢！

HTML

<div class="tag">
    <a href="#">
        <span class="content">Test album</span>
    </a>
    <a href="#" class="album">X</a>
</div>

CSS

div.tag {
    background: red;
}

测试用例：http://jsfiddle.net/T4XJ3/1/

Answer 1

<div>元素有display:block，所以它总是占用其容器的整个宽度。

您可以使用display: inline-block（demo）来使其“灵活”。

这是你要找的吗？

Answer 2

内联阻止救援！

div.tag {
  background: red;
  display: inline-block;
}

来自w3c规范：

  

此值使元素生成内联级别   块容器。内联块的内部格式为a   块框，元素本身被格式化为原子   内联级别的框。

简单来说，这意味着在你的div之外它就像一个跨度（大小适合内容，内联流内容等），而你的div内部就像div一样（用于定位，尺寸，填充等。）。