尝试将box-sizing更改为border-box。填充是增加输入元素的宽度。

参见这里的演示

CSS

input[type=text],
input[type=password] {
    width: 100%;
    margin-top: 5px;
    height: 25px;
    ...
}

input {
    box-sizing: border-box;
}

+ box-sizing

其他答案似乎告诉你硬编码宽度或使用特定于浏览器的黑客。我认为有一个更简单的方法。

通过计算宽度并减去填充(这会导致字段重叠)。20px来自于左填充10px和右填充10px。

input[type=text],
input[type=password] {
    ...
    width: calc(100% - 20px);
}

根据CSS的基本框模型，一个元素的宽度和高度应用于它的内容框。填充位于内容框之外，增加元素的整体大小。

因此，如果您将填充为100%宽度的元素设置为填充，则其填充将使其宽度大于其包含元素的100%。在您的上下文中，输入变得比它们的父项更宽。

您可以更改框模型处理填充和宽度的方式。设置box-sizing CSS属性为border-box以防止填充影响元素的宽度或高度:

border-box: width和height属性包括padding和border，但不包括margin…注意，填充和边框将在方框内。

注意box-sizing的浏览器兼容性(IE8+)。 在此编辑时，不需要任何前缀。

Paul Irish和Chris coyer推荐下面的“inherited”用法:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

参考: * {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;/*85px;*/ } .login-bottom { padding: 35px 15px 0 0; } <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" /></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" /></span> </div> <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;">Remember my email</label> <input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" 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 class="login-bottom"> <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>

在你的父div set .parent {height: fit-content;｝

填充被添加到整体宽度。因为你的容器有一个像素宽度，你最好也给输入一个像素宽度，但记住要从你设置的宽度中删除填充和边框，以避免同样的问题。

试着编码一下

*, ::after, ::before {
  box-sizing: border-box;
}