爲什麼文本框輸入控件突破父div？

-1

<div style="background-color:Red;width:100px;height:100px;padding:5px;"> 
    <input type="text" class="text" id="txtExtraSubject" style="width:450px;"/> 
</div>

當它運行在瀏覽器中，股利不增長，以適應更大的文本框，它顯示爲文本框是剛剛打破了股利。爲什麼會發生這種情況，以及如何解決這個問題？

來源

2011-07-25 Karim

如果你是downvoting評論投票的原因。 – Karim

因爲width: 100px表示「寬度爲100像素」而不是「寬度至少爲100像素」。

您可以應用顯示屬性，使其收縮包裝並添加min-width。

（未經測試：display: table; min-width: 100px;，其他推脫包裝方法可供選擇，包括浮動的內容（float: left））

來源

2011-07-25 20:57:52 Quentin

以及我現在正在測試最小寬度，只是想確保它與ie6兼容 – Karim

IE6不支持最小寬度。 Google知道黑客可以僞造它。 – Quentin

以及它的工作原理，但問題是，如果我不包括顯示：表格上的div它只是增長到100％的寬度。問題是我認爲顯示：表不支持IE7，所以我正在尋找另一個解決方案 – Karim

你指定的高度和股利的寬度 - 爲什麼要忽略你告訴什麼它要做什麼？

只需卸下寬度或將其設置爲460像素（450像素的文本區域和10px的進行填充）

來源

2011-07-25 20:58:15 Dave

好吧，我不想每次更改內容時在div上設置寬度，我希望它像自動所以最小寬度實際上是我需要的:) – Karim

你也可能對父用overflow:auto;。

它將限制文本編輯到父div。但請注意，由於寬度已經被指定，它不會增加父寬度。結果將是一個水平滾動條。

如果不需要，可以減小文本輸入的寬度，或者在父項上使用min-width而不是width。

來源

2011-07-25 21:07:52

爲什麼文本框輸入控件突破父div？

回答

相關問題