Question

我已经遇到过这个问题多年了，之前我曾见过类似的问题，但是没有一个问题解决过这样一个事实，即在元素上设置width: 100%时，填充，边距和边框会增加< / em>宽度。

看看这个Fiddle。

白色最顶部的文本框是标准文本框，其宽度设置为100%。正如您所看到的那样，由于边距，填充和边框设置，它会溢出它的父级。

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

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

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

Answer 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以确定元素的宽度，包括边框和填充的宽度

Answer 2

使用calc来补偿边距，并使用填充<{1}}

box-sizing

FIDDLE

Answer 3

尝试使用display:table-cell属性

  display:table;
  display:table-cell;

可能对你有所帮助

请查看此链接

Style input element to fill remaining width of its container

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

3 个答案: