CSS输入宽度:100%超出父边界

小开

填充本质上是添加到宽度上的，因此当你说width:100%和padding: 5px 10px时，你实际上是在100%的宽度上添加了20px。

小开

你想让输入字段居中吗? 将元素居中的技巧:指定元素的宽度并将margin设置为auto，例如:

margin : 0px auto;
width:300px

一个链接到您更新的小提琴:

http://jsfiddle.net/4x2KP/5/

小开

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

小开

最佳答案

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

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

.

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

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

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

.

保罗爱尔兰和克里斯Coyier推荐"inherited"用法如下:

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

参考:
* {Box-sizing: Border-box
继承box-sizing可能稍微更好的最佳实践 . < / p >

下面是针对你具体情况的演示:

#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>

小开

你也有一个错误在你的css与感叹号在这一行:

background:rgb(242, 242, 242);!important;

去掉前面的分号。但是，important应该很少使用，并且在很大程度上可以避免使用。

小开

尝试将box-sizing更改为border-box。padding被添加到你的input元素的width中。

见Demo here

CSS

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


input {
box-sizing: border-box;
}

< a href = " http://css-tricks.com/box-sizing/ " rel = " noreferrer > < >强+ box-sizing < /强> < / >

小开

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

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

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>

小开

试着编码一下

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

小开

这很棘手，而且是根据情况而定的。这些评论中有一些困惑，让我们总结一下解决方案:

showdev在已接受的答案中解释了第一种有效方法。但是，这并不是最终结果。

事实上:如果你在输入中添加一些填充，它就可以工作了。如果你添加一些边距，它仍然是溢出。似乎box-sizing被忽略了。此外，摆弄min-width和max-width也是无用的。

要应用边缘，唯一的工作解决方案是由Al Zziwa解释的，使用calc()来减少宽度的边缘量。例如，添加左、右边距:
```
 input {
margin: 0 20px;
width: calc(100% - 40px);
}
```

如果您不喜欢这个解决方案，那么解决方法是避免在输入中使用空白，而是使用应用填充或空白的包装器。

小开

在你的父div中设置 .parent { height: fit-content; }