难以将文本字段设置为精确大小

Question

我想使用position:absolute设置我的文本字段，以便它占据父div的整个宽度。这是我的问题的Fiddle。我尝试用绝对做，但在我的浏览器覆盖整个身体并消失。我也可以使用width = 100%。您可以看到我已经使用过，但文本字段仍然移出了 父母div。提前致谢。

div.middle_form_container
{
width:auto;
padding:0px;
margin:15px 10px;
border:solid 1px red;
}
div.middle_form_container > form
{
width:auto;
margin:0px;
padding:0px;
}
div.sign_up_form_text
{
width:100%;
display:inline-block;
margin:0px;
margin-bottom:0px;
padding:0px;
}
div.name
{
width:48%;
margin:0px;
margin-right:0px;
float:left;
padding:0px;
    border:solid 1px blue;
}
div.first_name
{
margin-right:12px;
}
.sign_up_form
{
position:relative;
}
.sign_up_form > input[type=text],.sign_up_form > input[type=email],.sign_up_form >     input[type=password]
{
margin:0px 0 20px 0;
padding:10px;
border:solid 1px #555;
border-radius:6px;
font-family:"Merriweather Sans";
font-size:19px;
outline:none;
}
input.name
{
width:100%;
}
div.other_text_form
{
margin:0px;
padding:0px;
}
input.other_text
{
width:100%;
margin:0px;
padding:0px;
}

Answer 1

默认情况下，填充位于外元素的宽度。

因此，假设div具有以下CSS：width: 100px; height: 100px; padding: 20px; border: 1px solid black;，绘制的边框将围绕140x140px的正方形。

这也适用于使用百分比。因此，width: 100%; padding: 20px;会创建一个100％ PLUS 40px（2x20px）宽的框。

因此，您可以通过以下两种方式之一来避免这种情况：

1. 考虑宽度中的填充（例如，使用width: 98%; padding: 1% = 100％宽度）
2. 使用box-sizing: border-box;属性（宽度：100％;填充：10px; box-sizing：border-box;`= 100％宽度）

第二个选项使填充 INSIDE 的宽度如图所示：

Paul Irish和CSS Tricks都比我更好地解释了这一点。

您也希望包含供应商前缀：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

Answer 2

input.name ,input.other_text{width:96%;
                             padding:10px 2%;}