0

我想设置我的文本字段position:absolute，使其占据父 div 的整个宽度。这是我的问题的小提琴 。我试图用绝对来做到这一点，但在我的浏览器中覆盖了整个身体并消失了。我也可以用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;
}
4

2 回答 2

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；框大小：边框框；` = 100% 宽度）

第二个选项使填充INSIDE宽度如图所示： 显示 box-sizing 效果的插图

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

您还需要包含供应商前缀：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
于 2013-06-21T10:36:26.243 回答
0 
input.name ,input.other_text{width:96%;
                             padding:10px 2%;}
于 2013-06-21T10:31:39.447 回答