将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适应文本大小，而不是继承父元素的宽度？

- Redox

---

你不需要在div上使用display: block;，因为它们默认就是块级元素。另外，当你给一个元素添加定位时，它也会变成块级元素。 - Kyle

Answer 1

我认为您已经得到了你想要的结果。或许可以在另一个浏览器中尝试一下？
以下是您的代码：jsfiddle

- Akahadaka

---

这确实有效。有时候你会忘记一些逻辑上的事情。谢谢 Akahadaka。 - Redox

Answer 2

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;
}

- Lucas Green

---

嗨Mythril，使用min-width会将父容器推出位置。我想要的是在父容器中溢出，但我希望标签根据文本宽度将自己推到容器外部。 - Redox

Answer 3

您可以在父类中使用“white-space：nowrap；”属性，而在子类中使用“width：100％；”。

希望这对您有所帮助。

- miksiii