宽度为 100% 的 CSS 输入超出父级边界 [英] CSS Input with width: 100% goes outside parent's bound
问题描述
我正在尝试制作一个由两个输入字段组成的登录表单，带有插入填充，但是这两个字段总是超出其父级的边界；问题源于添加的 inset 填充.可以做些什么来纠正这个问题?
JSFiddle 片段:
您可以更改盒模型处理填充和宽度的方式.设置 box-sizing CSS 属性 到 border-box 以防止填充影响元素的宽度或高度:
border-box :宽度和高度属性包括内边距和边框，但不包括边距...注意内边距和边框将在框内.
注意 box-sizing (IE8+) 的浏览器兼容性.
在进行此编辑时，不需要前缀.
保罗爱尔兰和Chris Coyier 推荐继承"用法如下:
html {box-sizing: 边框框；}*，*:之前，*:之后{box-sizing:继承；}参考:
* { Box-sizing: Border-box } FTW
继承 box-sizing 可能稍微好一点的最佳实践.
这是在您的特定上下文中的演示:
#mainContainer {行高:20px；font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;背景颜色:rgba(0, 50, 94, 0.2);边距:20px 自动；显示:表；-moz-border-radius: 15px;边框样式:实心；边框颜色:rgb(40, 40, 40);边框半径:2px 5px 2px 5px/5px 2px 5px 2px;边界半径:2px；边框半径:2px 5px/5px;box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);}.登录表格 {宽度:320px；高度:250px；填充:10px 15px 25px 15px；溢出:隐藏；}.login-fields >.login-bottom 输入#login-button_normal {浮动:对；填充:2px 25px；光标:指针；左边距:10px；}.login-fields >.login-bottom 输入#login-remember {向左飘浮;右边距:3px；}.spacer {填充底部:10px；}输入[类型=文本]，输入[类型=密码] {宽度:100%；高度:30px；填充:5px 10px；背景颜色:RGB(215、215、215)；行高:20px；字体大小:12px；颜色:RGB(136、136、136)；边框半径:2px 2px 2px 2px；边框:1px 实心 rgb(114, 114, 114);box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);box-sizing: 边框框；}输入[类型=文本]:悬停，输入[类型=密码]:悬停，标签:悬停~输入[类型=文本]，标签:悬停~输入[类型=密码] {背景:RGB(242、242、242)；！重要的;}输入[类型=提交]:悬停{box-shadow: 插入 0 1px 0 rgba(255, 255, 255, 0.3), 插入 0 -10px 10px rgba(255, 255, 255, 0.1);}.login-top {高度:自动；/*85px；*/}.登录底部{填充:35px 15px 0 0;}<div id="login" class="loginForm"><div class="login-top"><form class="login-fields" onsubmit="alert('test'); return false;"><div id="登录电子邮件" class="登录字段"><label for="email" style="-moz-user-select: none;-webkit-user-select: none;"onselectstart="return false;">电子邮件地址</label><span><input name="email" id="email" type="text"/></span>
<div class="spacer"></div><div id="登录密码" class="登录字段"><label for="password" style="-moz-user-select: none;-webkit-user-select: none;"onselectstart="return false;">密码</label><span><input name="password" id="password" type="password"/></span>
<div class="login-bottom"><input type="checkbox" name="remember" id="login-remember"/><label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;"onselectstart="return false;">记住我的电子邮件</label><input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="登录"/>
</表单>
