是否可以设置文本输入的样式以填充其父项的宽度？答案

【问题标题】：Is it possible to style a text input to fill the width of it's parent?是否可以设置文本输入的样式以填充其父项的宽度？
【发布时间】：2012-07-28 15:36:35
【问题描述】：

我多年来一直有这个问题，我之前也看到过类似的问题，但没有一个解决了这样一个事实，即在元素上设置 width: 100% 时 - 内边距、边距和边框会增加宽度。

看看这个Fiddle。

最上面的白色文本框是一个标准文本框，其宽度设置为100%。如您所见，由于边距、填充和边框设置，它会溢出它的父级。

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

红色 div 是控件 - 我希望输入就像那样。

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

【问题讨论】：

标签： css width textinput

【解决方案1】：

你可以：

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.

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

【讨论】：

当我使用父级的填充属性伪造边距时，这实际上是一个completely viable solution。 +1 感谢您的回答
这个答案应该有更多的赞！谢谢！！

【解决方案2】：

使用calc 补偿边距，使用box-sizing 补偿内边距

input#classic
{
    padding: 5px;
    margin: 5px;
    width: -webkit-calc(100% - 10px);
    width: -moz-calc(100% - 10px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

FIDDLE

【讨论】：

这似乎是正确的解决方案，但不幸的是browser support is still lacking。此外，由于某种原因，您的示例在 FireFox 中也不起作用。
可惜 Opera 不支持它

【解决方案3】：

尝试使用display:table-cell 属性

  display:table;
  display:table-cell;

对你有帮助

请查看此链接

Style input element to fill remaining width of its container

【讨论】：