是否可以设置文本输入的样式以填充其父级的宽度？ [英] Is it possible to style a text input to fill the width of it's parent?

问题描述

我这个问题已经很多年了，以前我也看过类似的问题，但是没有一个解决了以下事实：在元素上设置 width：100％ -填充，边距和边界会增加宽度。

I have had this issue for years and I've seen similar questions before, but none of them have addressed the fact that when setting width: 100% on an element - paddings, margins and borders will increase the width.

看看这个< a href = http://jsfiddle.net/qfUre/6/>提琴。

最上面的白色文本框是一个标准文本框，带有宽度设置为 100％。如您所见，由于页边距，填充和边框设置的原因，它的父级溢出。

The white topmost text box is a standard text box with it's width set to 100%. As you can see it overflows it's parent because of the margin, padding and border settings.

绿色文本框的样式类似于使用位置的div。 ：绝对。

The green text box is styled like a div using position: absolute. This works like a dream in webkit browsers but nowhere else.

红色div是控件-我希望输入操作就是这样

The red div is the control - I want the input to act just like that.

在所有现代方式中，我是否可以使用一些技巧来使文本输入像红色div一样换句话说，浏览器是否适合父级填充？请编辑我的小提琴或创建您自己的小提琴以伴随您的答案。谢谢！

Are there any hacks/tricks I can employ to have my text inputs act just like the red div in all modern browsers, in other words, fit inside the padding of the parent? Please edit my Fiddle or create your own to accompany your answer. Thanks!

推荐答案

您可以：

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演示。

请注意，我删除了保证金，因为导致溢出，并设置 box-sizing 来确定元素的宽度，包括边框和填充的宽度。

Note I removed the margin, since that was causing an overflow, and set the box-sizing to determine the width of the element including the width of the borders and padding.

这篇关于是否可以设置文本输入的样式以填充其父级的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！