使用CSS定义
box-sizing:border-box可防止填充影响元素的宽度或高度。请参阅的文档
box-sizing。您可能还需要检查（IE8 +）的浏览器兼容性
box-sizing。
border-box
：width和height属性包括padding和border，但不包括margin…。请注意padding和border将在盒子内部。
input[type=text],input[type=password] { box-sizing : border-box;}编辑：在进行此编辑时，不需要前缀
box-sizing。
#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;}input[type=text],input[type=password] { width: 100%; height: 30px; 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); box-sizing: border-box;}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);}.login-top { height: auto;}.login-bottom { padding: 35px 15px 0 0;}<div id="mainContainer"> <div id="login" > <div > </div> <form onsubmit="alert('test'); return false;"> <div id="login-email" > <label for="email" onselectstart="return false;">E-mail address</label> <span><input name="email" id="email" type="text" /></span> </div> <div ></div> <div id="login-password" > <label for="password" onselectstart="return false;">Password</label> <span><input name="password" id="password" type="password" /></span> </div> <div > <input type="checkbox" name="remember" id="login-remember" /> <label for="login-remember" onselectstart="return false;">Remember my email</label> <input type="submit" name="login-button" id="login-button_normal" value="Log in" /> </div> </form> </div></div>或者，不对
<input>元素本身添加填充，而是对
<span>包装输入的元素进行样式设置。这样，
<input>可以将元素设置为
width:100%，而不受任何其他填充的影响。下面的例子：
#login-form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: rgba(0, 50, 94, 0.2); margin: 20px auto; padding: 10px 15px 25px 15px; border: 4px solid rgb(40, 40, 40); box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2); border-radius: 2px; width: 320px;}label span { display: block; padding: .3em 1em; background-color: rgb(215, 215, 215); border-radius: .25em; border: 1px solid rgb(114, 114, 114); box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1); margin: 0 0 1em;}label span:hover { background: rgb(242, 242, 242); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);}input[type=text],input[type=password] { background: none; border: none; width: 100%; height: 2em; line-height: 2em; font-size: 12px; color: rgb(136, 136, 136); outline: none;}.login-bottom { margin: 2em 1em 0 0;}input#login-button { float: right; padding: 2px 25px;}input#login-remember { float: left; margin-right: 3px;}<form id="login-form"> <label>E-mail address <span><input name="email" type="text" /></span> </label> <label>Password <span><input name="password" type="password" /></span> </label> <div > <label> <input type="checkbox" name="remember" id="login-remember" />Remember my email </label> <input type="submit" name="login-button" id="login-button" value="Log in" /> </div></form>
