HTML輸入元素寬於包含Div

我有一個div元素中包含的html元素。高度由外部div決定，輸入控件的高度和寬度均爲100％。在最基本的層面上，我遇到了一個問題，即文本框超出了包含div的權限。HTML輸入元素寬於包含Div

基本示例代碼：

<div style="height:25px; width: 150px;"> 
    <input type="text" style="height:100%; width:100%" /> 
</div>

該控件的繪製比這要複雜得多，但仍然在控制被剝離下來到這個水平，我在文本框伸出過去的問題包含div。

來源

2009-10-27 BrandonS

而且什麼問題或問題？ – 2009-10-27 20:42:29

什麼瀏覽器/版本？ – 2009-10-27 20:43:33

好的，所以問題是爲什麼我的文本框元素延伸出它的父div？我發現它似乎與我的DOCTYPE有關。我們需要使用 <！DOCTYPE HTML PUBLIC！「 - // W3C // DTD HTML 4.01 // EN」「http://www.w3.org/TR/html4/strict.dtd」> 使用我的帖子中的代碼，如果我將它插入HTML頁面而不給它一個DOCTYPE，它可以正常工作。因此，爲了重現我的問題，您必須使用嚴格的4.01 DOCTYPE，然後使用開發人員工具檢查DIV和TextBox的大小或在DIV上設置邊框。 – BrandonS 2009-10-27 21:22:32

而不直接應用該樣式輸入元素上，也許抽象的CSS成一個文件，並使用類：

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
} 

div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 

<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div>

我跑出門之前，我可以測試，如果這有助於在所有，但至少，您可以在DIV CSS上玩最大高度/寬度設置，以便在我的解決方案不起作用時不會中斷。像這樣抽象出的CSS使得使用像Firefox中的Firebug這樣的插件更容易解決問題。

雖然問題是否需要將輸入標籤放在自己的DIV中？我不會感到驚訝，如果只有更好的佈局，你可以建立，這將避免需要做到這一點...

來源

2009-10-27 20:49:54

我認爲html被簡化爲示範性的，我不認爲* - 但我可能是錯的 - 這是他的實際使用案例。 – 2009-10-27 20:51:58

我剛剛試過這個apporach，它似乎在IE 8和FF 3.5中工作 – 2009-10-27 20:52:17

好吧，我總是這樣從字面上接受這樣的要求，我的愚蠢機器人機器人大腦沒有模糊的解釋開關：P – 2009-10-27 20:53:16

我假設你想包含的元素（<input>）小於，或完全包含在內，<div>？

您可以：

input {width: 50%; /* or whatever */ }

一個HTML元素的寬度（我認爲）作爲定義的寬度+邊框+保證金+填充

如果您已經定義的輸入具有計算100％父寬度，然後添加其他屬性它肯定會溢出父div。

您可以將邊距/填充/邊框設置爲0，但這可能看起來不太好。所以它的更容易，雖然不一定是完美的，只是使用適當的更小的寬度。

你可以，當然，使用

#parent_div {overflow: hidden; /* or 'auto' or whatever */}

隱藏通常會溢出容器DIV的輸入元素的一部分。

來源

2009-10-27 20:50:59

這很有趣。我將不得不更多地玩這個想法。我們以這種方式創建其他Web控件，並且我沒有使用「select」元素的這個問題（可能它沒有內置填充或邊距，除了它的邊框，所以它沒有太多問題 – BrandonS 2009-10-27 21:41:13

不幸的是，這將取決於您正在使用的瀏覽器，但設置對象的寬度（文本框）沒有考慮對象上邊框的寬度。大多數瀏覽器只考慮來自外部對象的任何填充和來自所包含對象的邊距，但少數（我在看你IE）在計算百分比時不會添加邊界;

最好的辦法是改變文本框的邊框或在格蘭文本框，並說2px的與一個margin-top: -2px和margin-left:-2px（我在邊框的寬度猜測）填充容器之間的另一個DIV扔

來源

2009-10-27 20:56:24

+ 1：通過我的答案的一半，你也打敗了我（它真的需要代表） – KyleFarris 2009-10-27 20:58:47

你可以使用box-sizing：邊框來處理這個問題，這意味着輸入框的邊框實際上在寬度內輸入，而不是在外面添加保羅愛爾蘭做比我更好的解釋它：http://paulirish.com/2012/box-sizing-border-box-ftw/ – heedfull 2013-02-05 06:52:47

我知道這篇文章相當老，但這是一個常見的問題，沒有人發佈任何好的答案...

以下HTML代碼看起來不錯。但是，當我添加的doctype，問題出現

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div>

要解決的寬度/高度的問題，您可以添加填充到您的field_container，但會使容器更大。

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    padding-bottom: 6px; 
    padding-right: 4px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div>

如果你不能改變容器的寬度，也可以使用下面的技巧，但仍然會增加高度

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    padding-bottom: 6px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <div style="height: 100%; margin-right:4px"><input type="text" name="" value="" /></div> 
</div>

來源

2012-08-06 05:35:58 Gael

您可以使用盒大小：邊界框照顧這個。只要把你的CSS文件中的以下內容：

input{box-sizing:border-box}

這意味着，在輸入框的邊框實際上是輸入的寬度內，而不是被添加到外部。這是使輸入大於容器的原因。

保羅愛爾蘭有真正的好文章，解釋這個技術http://paulirish.com/2012/box-sizing-border-box-ftw

他使有關填充這些點也適用於邊境。

甚至還有一個羅盤mixin，使其更容易支持舊瀏覽器。（http://compass-style.org/reference/compass/css3/box_sizing/）

來源

2013-02-05 06:58:05 heedfull

好後@heedfull，但我根據你鏈接到的第一篇文章，應該輸入{box-sizing：border-box}，而不是邊框。 – Bill 2013-05-23 14:34:36

好點子@Bill。editted the typo。謝謝 – heedfull 2015-02-18 14:59:12

這使我的工作：

input { 
    padding: 0.2em; 
    box-sizing: border-box; 
    width: 100% 
}

來源

2016-09-02 13:41:30 Raphayol

HTML輸入元素寬於包含Div

回答

相關問題