帶填充的100％寬度輸入

如何製作左/右填充爲10px的textarea /輸入，並且將與其父項一樣寬。帶填充的100％寬度輸入

textarea,input{ 
    padding:5px 10px 5px 10px; 
    width:100%; 
}

在這種情況下，輸入更寬。

來源

2012-11-22 user1785870

大約有箱式施膠解決這方面一個很好的討論，請訪問：http://css-tricks.com/box-sizing/（這是解決Meliborn表明，注它與哪些瀏覽器兼容。它在文章的底部） –

將margin屬性添加到您的css代碼中。

來源

2012-11-22 22:09:46 SaidbakR

這與在寬度上添加填充的框模型有關。所以寬度將是100％+填充寬度。請激勵你的解決方案的工作原因。 –

嗯，好老Box Model。填充被添加到寬度，所以爲了達到預期的效果，你還必須在填充中使用百分比。試試這個：

textarea, input { 
    padding: 1% 2% 1% 2%; 
    width: 96%; 
}

來源

2012-11-22 22:11:01 mattytommo

即時消息絕對avare這個和盒模型。我知道它，它必須是像素完美。 – user1785870

然後，正如@Meliborn所建議的那樣，盒子尺寸是你的選擇（不知道IE7/IE8是否可以工作）。 – mattytommo

@ user1785870另一種解決方案是修復寬度的大小（如果它必須是像素完美的）。 – mattytommo

textarea{ 
     box-sizing: border-box; 
     width:100%; 
     padding: 10px 
    }

來源

2012-11-22 22:13:58 Meliborn

工程，但沒有IE7 ... ehh – user1785870

@ user1785870對於IE6/7，您可以選擇使用** [box-sizing polyfill]（https://github.com/Schepp/box-sizing-polyfill）**提供「盒子尺寸」功能。 –

@ user1785870我有針對IE7的解決方案 –

HTML標記：

<div class="input_wrap"> 
    <input type="text" /> 
</div>

CSS：

div { 
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */ 
} 

input { 
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px; 
    border: none; 
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

來源

2012-11-23 05:34:02

帶填充的100％寬度輸入

回答

相關問題