如何使用填充文本輸入填充其容器

當然，塊元素上的width: 100%填充容器，但僅當邊框，填充和邊距爲零時才填充容器。把這樣的一個input放在一個包含div的填充中有訣竅，但我很好奇爲什麼簡單地input {display: block; width: auto;}不起作用。建議？如何使用填充文本輸入填充其容器

來源

2010-07-12 Steven Xu

我同意centr0爲什麼width: auto不起作用。

如果你真的想得到一個input爲其容器的全寬，那麼下面的工作。鑑於：

<div id="Container"> 
    <form> 
     <input type="text" /> 
    </form> 
</div>

與CSS這樣做：

form { 
    padding: 0 0 0 14px; 
    } 

input { 
    padding: 5px; 
    width: 100%; 
    margin: 0 0 0 -14px; 
}

說明：顯然，在input的-14px保證金抵消加入form元素的填充。不太明顯的是14px來自哪裏。它等於input的左/右5px填充加上input元素邊框寬度的默認值（在我測試的所有瀏覽器上爲2px）。所以2 + 5 + 5 + 2 = 14.

要真正確定你是一致的跨瀏覽器，你應該明確地設置邊框寬度爲你所期望的input。如果你想要一個不同的填充（或者更粗/更細的邊框），那麼只需重做數學。 3px填充將是10px而不是14px，7px填充將是18px而不是14px。

例如，您可以將#Container（也可以是body本身的寬度僅設爲默認爲頁面寬度的100％）的寬度設置爲所需的寬度，並且上面的CSS應與其寬度匹配。

來源

2010-07-12 19:07:23 ScottS

我認爲'form> div.container> input'對於大多數情況在語義上更好。儘管如此，這個解決方案似乎是最好的解決方案。 – 2010-11-08 00:56:30

如果我沒記錯的話，輸入的默認大小不會跨越其容器的寬度。「width：auto;」就像將樣式重置爲其默認值一樣。

來源

2010-07-12 17:54:48 cp3

如果您未使用Reset CSS Stylesheet，則輸入元素將具有瀏覽器設置的一些默認樣式，這可能包括填充和邊距。

也，width:auto將給瀏覽器默認。嘗試width:100%

來源

2010-07-12 17:55:26 Jake

提示問題的問題是'width：100％'不允許邊框或填充，因爲它們會使其超過100％。 – 2010-07-12 18:53:50

我很困惑這個問題到底是什麼呢？似乎回答自己。填充，邊距和邊框使它超過100％，因爲這是[css box模型]（http://www.w3.org/TR/CSS2/box.html）的工作原理。總寬度=寬度+邊框+邊距+填充。 'width：auto'不起作用，因爲'width：auto'意味着不同的東西。 – Jake 2010-07-13 23:18:17

-1

重置容器的填充可以解決問題。

td { 
    padding: 0 1em; 
}

來源

2010-08-15 12:13:22 Cheng

如何使用填充文本輸入填充其容器

回答

相關問題