CSS：填充父容器的文本框

我試圖讓<input type="text">（此後稱爲「文本框」）通過設置其width至100%填充父容器。這工作，直到我給文本框填充。然後將其添加到內容寬度並且輸入字段溢出。請注意，在Firefox中，只有在將內容呈現爲符合標準時纔會發生這種情況在怪癖模式下，另一個盒子模型似乎適用。CSS：填充父容器的文本框

下面是在所有現代瀏覽器中重現行爲的最小代碼。

#x { 
 
    background: salmon; 
 
    padding: 1em; 
 
} 
 

 
#y, input { 
 
    background: red; 
 
    padding: 0 20px; 
 
    width: 100%; 
 
}

<div id="x"> 
 
    <div id="y">x</div> 
 
    <input type="text"/> 
 
</div>

我的問題：如何獲得文本框，以適應集裝箱？

通知：爲<div id="y">，這很簡單：只需設置width: auto。但是，如果我嘗試爲文本框執行此操作，效果會有所不同，並且文本框將其默認行數視爲寬度（即使我爲文本框設置了display: block）。

/編輯：大衛的「解決方案」當然會工作。但是，我不想修改HTML - 我特別不想添加沒有語義功能的虛擬元素。這是我想要不惜一切代價避免的典型案例divitis。這隻能是最後一招。

來源

2008-09-09 Konrad Rudolph

可以圍繞一個<div>文本框並給予<div>padding: 0 20px。您的問題是100％寬度不包括任何填充或邊距值;這些值被添加在100％寬度的頂部，因此溢出。

來源

2008-09-09 19:02:04

我相信你可以抵消利潤率爲負的溢出。即

margin: -1em;

來源

2008-09-09 18:45:56

此行爲是由盒模型的不同解釋引起的。正確的框模型指出寬度僅適用於內容和填充以及邊距。因此，你的100％加上一個20px左右填充等於100％+ 40px的總寬度。原來的IE盒子模型，也被稱爲怪癖模式，包括寬度的填充和邊距。因此，在這種情況下，您的內容寬度將爲100％ - 40px。這就是爲什麼你會看到兩種不同的行爲。據我所知沒有解決方案，但是有一個解決方法是將寬度設置爲98％，填充爲1％。

來源

2008-09-09 21:00:49

什麼是負填充？如果負值保證金不起作用。你甚至可以有負填充？ – Sekhat 2009-04-17 09:20:04

@Domenic這是行不通的。寬度自動只做該元素的默認行爲，因爲寬度的初始值爲auto（請參見第164頁，級聯樣式表級別2修訂1規範）。指定類型塊的顯示也不起作用，這只是告訴瀏覽器在顯示元素時使用塊框，並且不會像div一樣指定儘可能多的空間的默認行爲（請參見第121頁，層疊樣式表2級修訂1規範）。該行爲由可視用戶代理而不是CSS或HTML定義處理。

來源

2008-09-09 21:38:47

因爲方式Box-Modell的定義和實現，我不認爲這是一個只有CSS的解決了這個問題。（除了什麼Matthew描述：使用百分比填充，以及，例如寬度：94％;填充：0 3％;）

然而，你可以建立一些JavaScript代碼來計算頁面加載時的動態寬度。 ..hm，並且每當瀏覽器窗口調整大小時，該值當然也必須更新。

有趣的副產品一些測試中我所做的：火狐確實設置輸入欄的寬度爲100％，如果還到width: 100%;您還可以設置最大寬度爲100％。這在Opera 9.5或IE 7中不起作用（尚未測試舊版本）。

來源

2008-09-09 22:45:50 Ben

不幸的是，這是純CSS無法實現的;對於任何不平凡但靈活但受限的UI行爲，HTML或Javascript修改都是必需的。 CSS3專欄在這方面會有所幫助，但在您的情況下不會。

大衛的解決方案是最乾淨的。這不是一個真正的divitis的情況 - 你不會不必要地添加一堆div，或者給他們像「p」和「h1」這樣的類名。這是爲特定目的服務的，這種情況下的好處在於它也是一個可擴展的解決方案 - 例如，您隨後可以隨時添加圓角，而無需進一步添加任何內容。輔助功能也不受影響，因爲它們是空的div。

FWIW，這裏就是我實現我所有的文本框：

<div class="textbox" id="username"> 
    <div class="before"></div> 
    <div class="during"> 
     <input type="text" value="" /> 
    </div> 
    <div class="after"></div> 
</div>

然後，您就可以免費使用CSS來添加圓角，添加填充像你的情況，等等，但你也不要」不得不 - 你可以自由地隱藏這些側邊的div，只需要一個常規的輸入文本框。

其他解決方案是使用表格，例如，亞馬遜使用表格以獲得靈活但約束的佈局，或者使用Javascript來調整大小並在窗口大小上更新它們，例如， Google文檔，Google地圖等都是這樣做的。

無論如何，我的兩分錢：不要讓唯心主義妨礙這種情況下的實用性。 :) David的解決方案很有效，並且幾乎不會混淆HTML（事實上，使用「before」和「after」之類的語義類名仍然非常乾淨）。

來源

2009-07-04 18:39:26

默認填充和邊框會阻止你的文本框，從真正的爲100％，所以首先你必須將它們設置爲0：

input { 
    background: red; 
    padding: 0; 
    width: 100%; 
    border: 0; //use 0 instead of "none" for ie7 
}

然後，把你的邊界，你在想任何填充或保證金div圍繞文本框：

.text-box { 
    padding: 0 20px; 
    border: solid 1px #000000; 
} 

<body> 
    <div id="x"> 
     <div id="y">x</div> 
     <div class="text-box"><input type="text"/></div> 
    </div> 
</body>

這應該允許您的文本框是可擴展的，並且您需要的尺寸不需要JavaScript。

來源

2010-12-17 16:12:42

使用CSS3，您可以在輸入中使用框大小屬性來標準化它們的框模型。像這樣的讓你添加填充，並有100％的寬度：

input[type="text"] { 
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit 
    -moz-box-sizing: border-box; // Firefox, other Gecko 
    box-sizing: border-box;   // Opera/IE 8+ 
}

不幸的是這不會對IE6/7，但其餘的工作都很好（Compatibility List），所以如果你需要支持這些瀏覽器你最好的選擇是戴維斯解決方案。

如果您想了解更多，請查看this brilliant article by Chris Coyier。

希望這會有所幫助！

來源

2011-03-23 13:19:56 studioromeo

CSS：填充父容器的文本框

回答

相關問題