宽度为 100% 的 CSS 输入超出父级边界
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16907518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Input with width: 100% goes outside parent's bound
提问by peelz
I am trying to make a login form constituted of two input fields with an inset padding, but those two fields always end up exceeding its parent's boundaries; the issue stems from the added insetpadding. What could be done in order to rectify this issue?
我正在尝试制作一个由两个输入字段组成的登录表单，带有插入填充，但是这两个字段总是超出其父级的边界；问题源于添加的插入填充。可以做些什么来纠正这个问题？
JSFiddle snippet: http://jsfiddle.net/4x2KP/
JSFiddle 片段：http: //jsfiddle.net/4x2KP/
N.B.: The code may not be at its cleanest. For instance, the span element that encapsulates the text inputs may not be needed at all.
注意：代码可能不是最干净的。例如，可能根本不需要封装文本输入的 span 元素。
#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>回答by showdev
Use the CSS definition box-sizing:border-boxto prevent padding from affecting an element's width or height. See documentation for box-sizing. You may also want to check the browser compatibility of box-sizing(IE8+).
使用 CSS 定义box-sizing:border-box来防止填充影响元素的宽度或高度。参见文档box-sizing。您可能还想检查(IE8+)的浏览器兼容性box-sizing。
border-box: The width and height properties include the padding and border, but not the margin... Note that padding and border will be inside of the box.
border-box: width 和 height 属性包括内边距和边框，但不包括边距...请注意，内边距和边框将在框内。
input[type=text],
input[type=password] {
box-sizing : border-box;
}
EDIT: At the time of this edit, no prefixes are necessary for box-sizing. See shouldiprefix.com.
编辑：在进行此编辑时， . 不需要前缀box-sizing。请参阅shouldiprefix.com。
#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><input>元素本身添加填充，而是设置<span><span>元素包装输入的样式。这样，<input><input>元素可以设置为width:100%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>回答by Deiu
If all above fail, try setting the following properties for your input, to have it take max space but not overflow:
如果以上都失败，请尝试为您的输入设置以下属性，使其占用最大空间但不溢出：
input {
min-width: 100%;
max-width: 100%;
}
回答by Al Zziwa
The other answers seem to tell you to hard-code the width or use a browser-specific hack. I think there is a simpler way.
其他答案似乎告诉您对宽度进行硬编码或使用特定于浏览器的 hack。我认为有一个更简单的方法。
By calculating the width and subtracting the padding (which causes the field overlap). The 20px comes from 10px for left padding and 10px for right padding.
通过计算宽度并减去填充（导致字段重叠）。20px 来自左侧填充的 10px 和右侧填充的 10px。
input[type=text],
input[type=password] {
...
width: calc(100% - 20px);
}
回答by Sourabh
Try changing the box-sizingto border-box. The paddingis adding to widthof your inputelements.
尝试将 更改box-sizing为border-box。将padding被添加到width您的input元素。
CSS
CSS
input[type=text],
input[type=password] {
width: 100%;
margin-top: 5px;
height: 25px;
...
}
input {
box-sizing: border-box;
}
回答by ralph.m
Padding is added to the overall width. Because your container has a pixel width, you are better off giving the inputs a pixel width too, but remember to remove the padding and border from the width you set to avoid the same issue.
填充被添加到总宽度。因为你的容器有一个像素宽度，你最好也给输入一个像素宽度，但记住从你设置的宽度中删除填充和边框以避免同样的问题。
回答by Jason Merry
I tried these solutions but never got a conclusive result. In the end I used proper semantic markup with a fieldset. It saved having to add any width calculations and any box-sizing.
我尝试了这些解决方案，但从未得到确凿的结果。最后，我对字段集使用了正确的语义标记。它无需添加任何宽度计算和任何框大小。
It also allows you to set the form width as you require and the inputs remain within the padding you need for your edges.
它还允许您根据需要设置表单宽度，并且输入保持在边缘所需的填充范围内。
In this example I have put a border on the form and fieldset and an opaque background on the legend and fieldset so you can see how they overlap and sit with each other.
在这个例子中，我在表单和字段集上放置了一个边框，在图例和字段集上放置了一个不透明的背景，这样你就可以看到它们是如何重叠和相互放置的。
<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>
回答by n00dle
Padding is essentially added to the width, therefore when you say width:100%and padding: 5px 10pxyou're actually adding 20px to the 100% width.
填充基本上是添加到宽度上的，因此当您说width:100%并且padding: 5px 10px实际上是将 20px 添加到 100% 宽度时。
回答by monika
Do you want the input fields to be centered? A trick to center elements: specify the width of the element and set the margin to auto, eg:
您希望输入字段居中吗？使元素居中的技巧：指定元素的宽度并将边距设置为自动，例如：
margin : 0px auto;
width:300px
A link to your updated fiddle:
指向您更新的小提琴的链接：
回答by Andy G
You also have an error in your css with the exclamation point in this line:
您的 css 中也有一个错误，在这一行中带有感叹号：
background:rgb(242, 242, 242);!important;
remove the semi-colon before it. However, !important should be used rarely and can largely be avoided.
去掉前面的分号。但是， !important 应该很少使用，并且可以在很大程度上避免使用。
