CSS 输入中的填充中断宽度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1377719/
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
Padding within inputs breaks width 100%
提问by Sandman
Ok, so we know that setting padding to an object causes its width to change even if it is set explicitly. While one can argue the logic behind this, it causes some problems with some elements.
好的，所以我们知道为对象设置填充会导致其宽度发生变化，即使它是明确设置的。虽然人们可以争论这背后的逻辑，但它会导致某些元素出现一些问题。
For most cases, you just add a child element and add padding to that one instead of the one set to 100%, but for form inputs, that's not a possible step.
在大多数情况下，您只需添加一个子元素并向该元素添加填充，而不是将其设置为 100%，但对于表单输入，这不是一个可能的步骤。
Take a look at this: http://sandman.net/test/formcss.html
看看这个：http: //sandman.net/test/formcss.html
The second input has its padding set to 5px which I very much prefer to the default setting. But unfortunately that makes the input grow 10px in all directions, including adding 10px to the 100% width.
第二个输入的填充设置为 5px，我非常喜欢默认设置。但不幸的是，这会使输入在所有方向上都增长 10px，包括在 100% 宽度上增加 10px。
Problem here is that I can't add a child element inside the input so I can't fix it. So the question is:
这里的问题是我无法在输入中添加子元素，所以我无法修复它。所以问题是：
Is there any way to add padding inside the input while still keeping the width 100%? It need to be 100% since the forms will render in different width parents so I don't know beforehand the width of the parent.
有没有办法在输入中添加填充同时仍然保持宽度 100%？它需要为 100%，因为表单将以不同宽度的父项呈现，所以我事先不知道父项的宽度。
回答by Víctor Dieppa Garriga
Using CSS3 you can use the property box-sizingto alter how the browser calculate the width of the input.
使用 CSS3，您可以使用属性box-sizing来改变浏览器计算input宽度的方式。
input.input {
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
You can read more about it here: http://css-tricks.com/box-sizing/
您可以在此处阅读更多相关信息：http: //css-tricks.com/box-sizing/
回答by michaelk
I don't know how cross browser compatible it is (it works in firefox and safari), but you could try this solution:
我不知道它的跨浏览器兼容性如何（它适用于 Firefox 和 safari），但您可以尝试以下解决方案：
DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}
(Only posted the values that I changed)
（只贴出我改变的值）
回答by user7116
One option is to wrap the INPUTin a DIVwhich has the padding.
一种选择是将 包裹INPUT在DIV具有填充的 a 中。
CSS:
CSS：
div.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}
div.paddedInput {
padding: 5px;
border: 1px solid black;
background-color: white;
}
div.paddedInput input {
border: 0px;
width: 100%;
}
HTML:
HTML：
<div class="formvalue">
<div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>
回答by XanderStrike
The oft-forgotten calccan come to the rescue here:
经常被遗忘的calc可以在这里解救：
input {
width: calc(100% - 1em);
padding: 0.5em;
}
Since we know the padding will add to the width of the element, we simply subtract the padding from the overall width. It's supported by all major browsers, is responsive, and doesn't require messy wrapper divs.
由于我们知道填充会增加元素的宽度，因此我们只需从总宽度中减去填充。所有主要浏览器都支持它，响应迅速，并且不需要凌乱的包装器 div。
回答by Keye
I've been having some issues with something similar to this. I have tds with inputs of 100% and a small padding. What I did was compensate for the padding on the td as follows:
我遇到了一些与此类似的问题。我有 100% 输入和小填充的 tds。我所做的是补偿 td 上的填充，如下所示：
.form td {
padding-right:8px;
}
.form input, .form textarea {
border: 1px solid black;
padding:3px;
width:100%;
}
padding of 8px to include the border and padding of the input/textarea. Hope this helps!
8px 的内边距以包括输入/文本区域的边框和内边距。希望这可以帮助！
回答by Gabz
One solution I have found works is to absolutely position the input with a relatively positioned parent tag.
我发现有效的一种解决方案是使用相对定位的父标签绝对定位输入。
<p class="full-width-input">
<input type="text" class="text />
</p>
The apply the style:
应用样式：
p.full-width-input {
position: relative;
height: 35px;
}
p.full-width-input input.text {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 5px;
}
The only thing to be aware of is that the paragraph tag needs a height setting as its absolutely positioned children will not expand its height. This avoids the need to set width: 100%by locking it to the left and right sides of the parent element.
唯一需要注意的是段落标签需要一个高度设置，因为它的绝对定位的子元素不会扩展它的高度。这避免了width: 100%通过将其锁定到父元素的左侧和右侧来设置的需要。
回答by Amber
Perhaps take the border+background off the input, and instead enclose it in a divwith border+background and width:100%, and set a margin on the input?
也许去掉 的边框+背景input，而是div用边框+背景和宽度：100%将它括起来，并在input?
回答by stephenmurdoch
Try using percentages for your padding:
尝试使用百分比作为填充：
.input {
// remove border completely
border: none;
// don't forget to use the browser prefixes
box-shadow: 0 0 0 1px silver;
// Use PERCENTAGES for at least the horizontal padding
padding: 5%;
// 100% - (2 * 5%)
width: 90%;
}
If you're worried about users on old browsers who can't see the box-shadow, just give the input a subtle background colour as backup. If you're using pixels for this sort of thing, then the chances are you're using them elsewhere, which could present a few extra-challenges, let me know if you encounter them.
如果您担心旧浏览器上的用户看不到框阴影，只需为输入提供微妙的背景颜色作为备份。如果您将像素用于此类事情，那么您很可能在其他地方使用它们，这可能会带来一些额外的挑战，如果您遇到它们，请告诉我。
回答by Tarik
Only thing I know to prevent this is assign values like that 100%-10. But it has some compatibility issues tho.
我唯一知道要防止这种情况发生的是分配像 100%-10 这样的值。但它有一些兼容性问题。
