css – 是否可以设置文本输入以填充其父项的宽度?

前端之家收集整理的这篇文章主要介绍了css – 是否可以设置文本输入以填充其父项的宽度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经有这个问题多年了,我以前也看过类似的问题,但是没有一个解决了这样一个事实:当在元素上设置width:100%时,paddings,边距和边框会增加宽度.

看看这个Fiddle.

白色最上面的文本框是一个标准文本框,其宽度设置为100%.由于边距,边距和边框设置,您可以看到它溢出它的父母.

绿色文本框的样式就像使用position:absolute的div.这在webkit浏览器中是一个梦想,但没有其他地方.

红色的div是控件 – 我希望输入的行为就是这样.

有没有任何黑客/技巧我可以使用我的文本输入行为就像所有现代浏览器中的红色div,换句话说,适合在父母的填充内?请编辑我的小提琴或创建自己的陪同你的答案.谢谢!

解决方法

您可以:
input#classic
{
    width: 100%;
    padding: 5px;
    margin: 0;
    -webkit-Box-sizing: border-Box;
    -moz-Box-sizing: border-Box;
    -o-Box-sizing: border-Box;
    -ms-Box-sizing: border-Box;
    Box-sizing: border-Box;        
}

JS Fiddle demo.

注意我删除了边距,因为这是造成溢出,并设置框大小以确定元素的宽度,包括边框的宽度和填充.

猜你在找的CSS相关文章