css - 使 div 宽度适合内容而不适合父级

Question

我想为我拥有的按钮制作一个标签。我的问题是标签比按钮宽。我目前已经这样做了（简单示例）：

<div class="parent_container_the_icon">
    <div class="label">
        This is the label text
    </div>
<div>

CSS：

.parent_container_the_icon {
    height: 50px;
    width: 50px;
    float: left;
}

.label {
    display: block;
    position: absolute;
    white-space: nowrap;
}

我想要的是标签采用标签文本本身的宽度而不包裹文本。目前它不换行文本，但标签框中的文本溢出，因为该框只占用容器的最大宽度。

如何强制标签div适合文本的大小而不继承父级的宽度？

Answer 1

HTML：

 <div class="parent_container_the_icon">
      <div class="label">
           This it the label text
      </div>
 <div>​

CSS：

.parent_container_the_icon {
    height: 50px;
    min-width: 50px; /*<== changed width to min-width*/
    float: left;
}

.label {
    /*removed position:absolute*/
    display: block;
    white-space:nowrap;
}

Answer 2

我想你得到了你想要的。也许检查另一个浏览器？
这是你的代码：jsfiddle

Answer 3

您可以white-space: nowrap;在父类和width: 100%;子类中使用属​​性。

希望这个对你有帮助。