适合div宽度的内容，而不是父母

我想为我有一个按钮做一个标签。我的问题是标签比按钮宽。我现在有像这样（简单的例子）来完成：适合div宽度的内容，而不是父母

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

来源

2012-09-07 Redox

你不需要显示：block;在div上，因为它们默认是块级元素。另外，当你为一个元素添加定位时，它也会使其成为块级别。 – Kyle

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

来源

2012-09-07 08:10:57 Akahadaka

这确实奏效。有时你忘记了逻辑的事情。谢谢Akahadaka – Redox

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

来源

2012-09-07 07:59:32

嗨Mythril，最小宽度它会推动父容器脱位。我想要的是父容器中的溢出，但我希望标签根据文本的宽度将其自身推出容器。 – Redox

您可以在孩子使用white-space: nowrap;财产在父类和width: 100%;。

我希望你觉得这个很有用。

来源

2014-05-05 10:49:09 miksiii

适合div宽度的内容，而不是父母

回答

相关问题