极客观点
项目管理
HarmonyOS
我正在尝试使用两个带有插入填充的输入字段制作登录表单，但它们最终超出了父级的范围。这是什么原因造成的？
JSFiddle 片段：http: //jsfiddle.net/4x2KP/
#mainContainer {
line-height: 20px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: rgba(0,50,94,0.2);
margin: 20px auto;
display: table;
-moz-border-radius: 15px;
border-style: solid;
border-color: rgb(40, 40, 40);
border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
border-radius: 2px;
border-radius: 2px 5px / 5px;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
.loginForm {
width: 320px;
height: 250px;
padding: 10px 15px 25px 15px;
overflow: hidden;
}
.login-fields > .login-bottom input#login-button_normal {
float: right;
padding: 2px 25px;
cursor: pointer;
margin-left: 10px;
}
.login-fields > .login-bottom input#login-remember {
float: left;
margin-right: 3px;
}
.spacer {
padding-bottom: 10px;
}
/* ELEMENT OF INTEREST HERE! */
input[type=text],
input[type=password] {
width: 100%;
height: 20px;
padding: 5px 10px;
background-color: rgb(215, 215, 215);
line-height: 20px;
font-size: 12px;
color: rgb(136, 136, 136);
border-radius: 2px 2px 2px 2px;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background:rgb(242, 242, 242) !important;
}
input[type=submit]:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -10px 10px rgba(255,255,255,0.1);
}
<div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text"></input></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password"></input></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember"></input>
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
</div>
</form>
</div>
</div>
原文由 peelz 发布，翻译遵循 CC BY-SA 4.0 许可协议
根据 CSS 基本框模型，元素的宽度和高度应用于其内容框。填充位于该内容框之外并增加了元素的整体大小。
因此，如果您将一个元素的内边距设置为 100% 宽度，则其内边距将使其比其包含元素的 100% 宽。在您的上下文中，输入变得比它们的父更宽。
您可以更改盒子模型处理填充和宽度的方式。将
box-sizingCSS 属性 设置为border-box以防止填充影响元素的宽度或高度：注意
box-sizing(IE8+) 的浏览器兼容性。在此编辑时， 不需要前缀。
Paul Irish 和 Chris Coyier 推荐下面的“继承”用法：
供参考，请参阅：
\* { 框尺寸：边框框 } FTW
继承 box-sizing 可能稍微好一点 最佳实践。
这是您特定情况下的演示：
或者，与其为
<input>元素本身添加填充，不如设置<span>元素的样式来包装输入。这样，<input>元素可以设置为width:100%而不受任何额外填充的影响。下面的例子：