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

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

看看这个Fiddle.

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

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

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

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

解决方法

您可以:
  1. input#classic
  2. {
  3. width: 100%;
  4. padding: 5px;
  5. margin: 0;
  6. -webkit-Box-sizing: border-Box;
  7. -moz-Box-sizing: border-Box;
  8. -o-Box-sizing: border-Box;
  9. -ms-Box-sizing: border-Box;
  10. Box-sizing: border-Box;
  11. }

JS Fiddle demo.

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

猜你在找的CSS相关文章