html - 难以将文本字段设置为准确大小

Question

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

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;高度:100px；填充:20px； border: 1px solid black;，绘制的边框将围绕一个 140x140px 的正方形。

这也适用于使用百分比。所以宽度:100%； padding: 20px; 将创建一个 100% PLUS 40px (2x20px) 宽的框。

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

1. 考虑宽度的填充(例如使用 width: 98%; padding: 1% = 100% width)
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;