寬度爲100％的輸入字段「達到」填充

我有一個帶有輸入字段的Tablecell。 Inputfield應該填充Tablecell，但不能覆蓋它的填充。我有什麼看起來像這樣（與螢火）：寬度爲100％的輸入字段「達到」填充

Form Element reaching into padding

我想保持的藍色區域內inputfield而不是raching成紫色的。

並且：當然我首先閱讀了關於此主題的所有問題。我閱讀了所有內容，但找不到任何可以解決問題的答案。

它應該適用於所有現代瀏覽器（即ie7）;

我做了一個minimal live Example與jsfiddle我試過所有的解決方案在其他問題，但我無法得到這個工作。 a）有沒有適用於此的工作解決方案？和b）是否還有一個很好的非解決方法？

爲什麼這是所有瀏覽器的問題？我認爲這是CSS中的錯誤規範。因爲如果我說「100％」，當然我希望元素適合內容區域的「100％」。 讓它流入填充和邊距的用例是什麼？

來源

2011-03-30 Chris

我已經回答了很多次這個問題。這是更好的版本之一：http://stackoverflow.com/questions/5219030/content-of-div-is-longer-then-div-itself-when-width-is-set-to-100/5219090#5219090 – thirtydot 2011-03-30 15:34:36

是的...再次...我讀了所有的問題，但你的解決方案只是不起作用，或者至少在我的情況下不起作用。 – Chris 2011-03-30 15:48:23

爲什麼你對那些試圖幫助你的人感到非常沮喪？ – biggles 2011-03-30 17:10:07

那麼，在這裏你去..

我使用確切同樣的方法，this answer。

參見：http://jsfiddle.net/AKUsB/

CSS：

.inputContainer { 
    background: #fff; 
    padding: 3px 3px; 
    border: 1px solid #a9a9a9 
} 
.inputContainer input { 
    width: 100%; 
    margin: 0; padding: 0; border: 0; 
    display: block 
}

HTML：

<div class="inputContainer"> 
    <input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" /> 
</div>

來源

2011-03-31 09:27:23 thirtydot

好吧，謝謝，我得到了這個工作，但我必須使填充的輸入容器2右側多於左側的像素，因爲兩側的1px邊框將導致輸入字段呈現2像素到我的填充td元素。所以我做的是：padding：3px 5px 3px 3px。這不會發生，如果你沒有一個td元素或其他一些圍繞它的塊元素在你的例子中。感謝您的幫助。 – Chris 2011-03-31 12:07:53

你可以放任何你喜歡的填充*或邊界*，你不應該像你所描述的那樣進行修改。例如：http://jsfiddle.net/AKUsB/1/但是，如果你已經整理出來了，那就把它放在一邊吧，這很好：P – thirtydot 2011-03-31 12:25:54

這裏的問題與盒子模型有關，當您說width: 100%時，它會根據可用內容（您可以在Web檢查器的「計算樣式」選項下看到）應用像素值。然而，填充然後被添加到該寬度，所以5px的填充將計算爲100％+ 10px的總寬度（每邊5）。

要解決此問題，您需要刪除您的填充或將其合併到寬度值中。例如：

input { width: 100%; padding: 0; }

或者

input { width: 90%; padding: 0 5%; } /* width totals 100% */

大多數形式的元件，通過默認，傳承填充一定量;所以即使你沒有專門給輸入應用填充，它仍然在那裏，因爲瀏覽器默認它有填充。

來源

2011-03-30 15:46:58 RussellUresti

這不*相當*的工作。你忘記了'border'，這與'padding'完全相同。它恰好就是這樣，'border'通常只有'1px'在每一邊，所以很難注意到。例如，請參閱：http://jsfiddle.net/thirtydot/dnCpF/ – thirtydot 2011-03-30 15:50:26

確實，您會遇到邊框問題。在大多數較新的瀏覽器中，您可以通過使用-webkit-box-sizing：border-box/-moz-box-sizing：border-box/-ms-box-sizing：border-box/box-sizing：border-框。這將允許框模型根據內容區域，填充和邊框來計算寬度。所以「寬度：100％」將包括所有這些值，而不是排除它們。 – RussellUresti 2011-03-30 15:53:38

@RussellUresti：是的，就是這樣。有關示例的問題的評論，請參閱我的鏈接答案。 – thirtydot 2011-03-30 15:55:42

我想你應該嘗試使用

box-sizing: border-box

來源

2017-09-08 07:38:32

寬度爲100％的輸入字段「達到」填充

回答

相關問題