適合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寬度的內容，而不是父母

回答

相關問題