宽度为的CSS输入：100%超出父项'；受约束
我试图创建一个由两个输入字段组成的带有插入填充的登录表单，但这两个字段最终总是超出其父字段的边界；这个问题源于添加的插入填充。可以采取哪些措施来纠正这一问题 JSFIDLE代码段： 注意：代码可能不是最干净的。例如，封装文本输入的span元素可能根本不需要宽度为的CSS输入：100%超出父项'；受约束,css,forms,input,width,Css,Forms,Input,Width,我试图创建一个由两个输入字段组成的带有插入填充的登录表单，但这两个字段最终总是超出其父字段的边界；这个问题源于添加的插入填充。可以采取哪些措施来纠正这一问题 JSFIDLE代码段： 注意：代码可能不是最干净的。例如，封装文本输入的span元素可能根本不需要 #主容器{ 线高：20px； 字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线； 背景色：rgba（0,50,94,0.2）； 保证金：20px自动； 显示：表格； -moz边界半径：15px； 边框样式：
#主容器{
线高：20px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
背景色：rgba（0,50,94,0.2）；
保证金：20px自动；
显示：表格；
-moz边界半径：15px；
边框样式：实心；
边框颜色：rgb（40,40,40）；
边界半径：2px 5px 2px 5px/5px 2px 5px 2px；
边界半径：2px；
边界半径：2px 5px/5px；
盒影：0 5px 10px 5px rgba（0,0,0,0.2）；
}
.loginForm{
宽度：320px；
高度：250px；
填充：10px 15px 25px 15px；
溢出：隐藏；
}
.login字段>.login底部输入#登录按钮_正常{
浮动：对；
填充：2x25px；
光标：指针；
左边距：10px；
}
.login字段>.login底部输入#登录记住{
浮动：左；
右边距：3倍；
}
.垫片{
垫底：10px；
}
/*这里有有趣的元素*/
输入[类型=文本]，
输入[类型=密码]{
宽度：100%；
高度：20px；
填充物：5px10px；
背景色：rgb（215215215215）；
线高：20px；
字体大小：12px；
颜色：rgb（136136136）；
边界半径：2px2px2px2px；
边框：1px实心rgb（114114114）；
盒影：0 1px 0 rgba（24,24,24,0.1）；
}
输入[类型=文本]：悬停，
输入[类型=密码]：悬停，
标签：悬停~input[type=text]，
标签：悬停~输入[类型=密码]{
背景：rgb（242，242，242）！重要；
}
输入[类型=提交]：悬停{
框阴影：
插图0 1px 0 rgba（255255,0.3），
插图0-10px 10px rgba（255255,0.1）；
}
电子邮件地址
密码
还记得我的电子邮件吗
宽度：100%填充：5px 10pxmargin : 0px auto;
width:300px
填充将添加到总宽度中。因为您的容器有像素宽度，所以最好也给输入一个像素宽度，但请记住从设置的宽度中删除填充和边框，以避免相同的问题。根据，元素的宽度和高度应用于其内容框。填充位于该内容框之外，并增加元素的总体大小 因此，如果将填充为100%宽度的元素设置为100%，则其填充将使其宽度大于其包含元素的100%。在您的环境中，输入比其父项更广泛 可以更改长方体模型处理填充和宽度的方式。将边框框设置为
以防止填充影响元素的宽度或高度：
边框框：宽度和高度属性包括填充和边框，但不包括边距。。。请注意，填充和边框将位于框的内部
注意（IE8+）。
在进行此编辑时
并推荐以下“继承”用法：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
有关参考信息，请参见：
以下是针对您的特定环境的演示：
#主容器{
线高：20px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
背景色：rgba（0,50,94,0.2）；
保证金：20px自动；
显示：表格；
-moz边界半径：15px；
边框样式：实心；
边框颜色：rgb（40,40,40）；
边界半径：2px 5px 2px 5px/5px 2px 5px 2px；
边界半径：2px；
边界半径：2px 5px/5px；
盒影：0 5px 10px 5px rgba（0,0,0,0.2）；
}
.loginForm{
宽度：320px；
高度：250px；
填充：10px 15px 25px 15px；
溢出：隐藏；
}
.login字段>.login底部输入#登录按钮_正常{
浮动：对；
填充：2x25px；
光标：指针；
左边距：10px；
}
.login字段>.login底部输入#登录记住{
浮动：左；
右边距：3倍；
}
.垫片{
垫底：10px；
}
输入[类型=文本]，
输入[类型=密码]{
宽度：100%；
高度：30px；
填充物：5px10px；
背景色：rgb（215215215215）；
线高：20px；
字体大小：12px；
颜色：rgb（136136136）；
边界半径：2px2px2px2px；
边框：1px实心rgb（114114114）；
盒影：0 1px 0 rgba（24,24,24,0.1）；
框大小：边框框；
}
输入[类型=文本]：悬停，
输入[类型=密码]：悬停，
标签：悬停~input[type=text]，
标签：悬停~输入[类型=密码]{
背景：rgb（242、242、242）；
！重要；
}
输入[类型=提交]：悬停{
框阴影：插入0 1px 0 rgba（255，255，255，0.3），插入0-10px 10px rgba（255，255，255，0.1）；
}
.登录顶部{
高度：自动；/*85px*/
}
.登录底部{
填充：35px 15px 0；
}
电子邮件地址
密码
还记得我的电子邮件吗
您的css中还有一个错误，在这一行中带有感叹号：
background:rgb(242, 242, 242);!important;
去掉前面的分号。但是!！重要的是应该使用
input[type=text],
input[type=password] {
width: 100%;
margin-top: 5px;
height: 25px;
...
}
input {
box-sizing: border-box;
}
input[type=text],
input[type=password] {
...
width: calc(100% - 20px);
}
input {
min-width: 100%;
max-width: 100%;
}
<html>
<head>
<style>
form {
width: 300px;
margin: 0 auto;
border: 1px solid;
}
fieldset {
border: 0;
margin: 0;
padding: 0 20px 10px;
border: 1px solid blue;
background: rgba(0,0,0,.2);
}
legend {
background: rgba(0,0,0,.2);
width: 100%;
margin: 0 -20px;
padding: 2px 20px;
color: $col1;
border: 0;
}
input[type="email"],
input[type="password"],
button {
width: 100%;
margin: 0 0 10px;
padding: 0 10px;
}
input[type="email"],
input[type="password"] {
line-height: 22px;
font-size: 16px;
}
button {
line-height: 26px;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Log in</legend>
<p>You may need some content here, a message?</p>
<input type="email" id="email" name="email" placeholder="Email" value=""/>
<input type="password" id="password" name="password" placeholder="password" value=""/>
<button type="submit">Login</button>
</fieldset>
</form>
</body>
</html>