23

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

看看这个Fiddle。

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

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

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

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

4

3 回答 3

39

你可以：

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 小提琴演示。

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

于 2012-07-30T22:21:39.027 回答
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;
}

小提琴

于 2012-07-30T22:30:36.997 回答
0

display:table-cell用属性试试 

  display:table;
  display:table-cell;

可以帮助你吗

请检查此链接

样式输入元素以填充其容器的剩余宽度

于 2012-07-31T06:24:51.573 回答