css - div 宽度不随内容增加

Question

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

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

提前致谢！

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/

score 2 · Accepted Answer

该<div>元素具有display:block，因此它将始终占据其容器的整个宽度。

您可以使用display: inline-block( demo ) 使它们“灵活”。

这是你要找的吗？

score 2 · Accepted Answer

内联块来救援！

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

来自 w3c 规范：

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

简单来说，这意味着在您的 div 之外它的行为就像一个跨度（大小以适应内容、在内容中内联流动等），而在您的 div 内部它就像一个 div 通常会（用于定位、调整大小、填充， ETC。）。

2 回答 2