带填充的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％宽度输入

回答

相关问题