HTML input 元素比 Containing Div 更宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1633522/
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
HTML input element wider than Containing Div
提问by BrandonS
I have an html element that is contained within a div. Height are dictated by the outer div and the height and width of the input control are 100%. At the most basic level, I am having an issue where the textbox extends past the right of the containing div.
我有一个包含在 div 中的 html 元素。高度由外部 div 决定，输入控件的高度和宽度为 100%。在最基本的层面上，我遇到了一个问题，即文本框超出了包含 div 的右侧。
Basic example code:
基本示例代码：
<div style="height:25px; width: 150px;">
<input type="text" style="height:100%; width:100%" />
</div>
The rendering of this control is far more complex than this, but still when the control is stripped down to this level, I have an issue where the textbox sticks out past the containing div.
这个控件的渲染比这复杂得多，但是当控件被剥离到这个级别时，我仍然遇到一个问题，即文本框伸出包含的 div。
回答by heedfull
You can use box-sizing:border-box to take care of this. Just put the following in your css file:
您可以使用 box-sizing:border-box 来解决这个问题。只需将以下内容放入您的 css 文件中：
input{box-sizing:border-box}
It means that border on the input box is actually inside the width of the input rather than being added onto the outside. This is what is making the input larger than the container.
这意味着输入框上的边框实际上是在输入的宽度之内，而不是添加到外部。这就是使输入大于容器的原因。
Paul Irish has really good post explaining this technique http://paulirish.com/2012/box-sizing-border-box-ftw
保罗爱尔兰有很好的帖子解释了这种技术http://paulirish.com/2012/box-sizing-border-box-ftw
The points he makes about padding also apply for the border.
他关于填充的观点也适用于边界。
There's even a compass mixin to make it easier to support older browsers. (http://compass-style.org/reference/compass/css3/box_sizing/)
甚至还有一个指南针 mixin 可以更轻松地支持旧浏览器。（http://compass-style.org/reference/compass/css3/box_sizing/）
回答by Raphayol
This made the job for me :
这使我的工作：
input {
padding: 0.2em;
box-sizing: border-box;
width: 100%
}
回答by Usman I
Try to give input width : 100%; box-sizing: border-box;
尝试提供输入 width : 100%; box-sizing: border-box;
回答by Mike Valstar
unfortunately this will depend on the browser you are working with but setting the width of the object (the textbox) does not take into account the width of the border on the object. most browsers only take into consideration any padding from the outer object and margins from the contained object but a few (i'm looking at you IE) do not add in the border when calculating percentages;
不幸的是，这将取决于您使用的浏览器，但设置对象（文本框）的宽度不会考虑对象上边框的宽度。大多数浏览器只考虑外部对象的任何填充和所包含对象的边距，但有一些（我在看你的 IE）在计算百分比时不添加边框；
your best bet is to change the border on the textbox or to throw in another div between teh textbox and the container with a padding of say 2px with a margin-top: -2pxand a margin-left:-2px(i'm guessing at the border width)
您最好的选择是更改文本框的边框，或者在文本框和容器之间添加另一个 div，填充为 2px，带有 amargin-top: -2px和 a margin-left:-2px（我猜是边框宽度）
回答by David says reinstate Monica
I'm assuming that you want the contained element (<input>) to be smaller than, or contained entirely within, the <div>?
我假设您希望包含的元素 ( <input>) 小于或完全包含在<div>?
You can either:
您可以：
input {width: 50%; /* or whatever */ }
An html-element's width is calculated (I think) as the defined width + borders + margin + padding
html 元素的宽度计算（我认为）为定义的宽度 + 边框 + 边距 + 填充
If you've already defined the input as having 100% width of the parent, and then the other attributes are added it will definitely overflow the parent div.
如果您已经将输入定义为父级的 100% 宽度，然后添加其他属性，它肯定会溢出父级 div。
You canset the margin/padding/borders to 0, but that would likely not look good. So it's easier, though not necessarily perfect, just to use a suitably-smaller width.
您可以将边距/填充/边框设置为 0，但这可能看起来不太好。所以它更容易，虽然不一定完美，只是使用合适的更小的宽度。
You could, of course, use
你当然可以使用
#parent_div {overflow: hidden; /* or 'auto' or whatever */}
to hide the portion of the input element that would normally overflow the container div.
隐藏通常会溢出容器 div 的输入元素部分。
回答by Gael
I know this post is fairly old, but it's a common problem and no one posted any good answers...
我知道这篇文章已经很老了，但这是一个常见问题，没有人发布任何好的答案......
The following HTML code looks fine. But when I add the doctype, the problem appear
下面的 HTML 代码看起来不错。但是当我添加文档类型时，问题就出现了
div.field_container
{
height: 25px;
width: 150px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<input type="text" name="" value="" />
</div>
To fix the width / height problem, you can add padding to your field_container, but that will make the container bigger.
要解决宽度/高度问题，您可以向 field_container 添加填充，但这会使容器变大。
div.field_container
{
height: 25px;
width: 150px;
padding-bottom: 6px;
padding-right: 4px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<input type="text" name="" value="" />
</div>
If you can't change the container width, you can also use the following trick, but that will still increase the height
如果你不能改变容器宽度，你也可以使用下面的技巧，但这仍然会增加高度
div.field_container
{
height: 25px;
width: 150px;
padding-bottom: 6px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<div style="height: 100%; margin-right:4px"><input type="text" name="" value="" /></div>
</div>
回答by Mike Arsenault
Instead of applying the style directly on the input element, maybe abstract the CSS into a file and use classes:
不是直接在输入元素上应用样式，而是将 CSS 抽象到一个文件中并使用类：
div.field_container
{
height: 25px;
width: 150px;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<input type="text" name="" value="" />
</div>
I am running out the door before I could test if this helps at all, but at the very least, you could play with max-height/width settings on the DIV css to make it not break if my solution doesn't work. And having the CSS abstracted like this makes problems easier to solve using a plugin like Firebug in Firefox.
在我测试这是否有帮助之前，我已经跑出去了，但至少，您可以在 DIV css 上使用 max-height/width 设置，以使其在我的解决方案不起作用时不会中断。像这样抽象的 CSS 使得使用 Firefox 中的 Firebug 等插件更容易解决问题。
Question though, is there a need to enclose the input tag in it's own DIV? I wouldn't be surprised if there is just a better layout you could build that would avoid the need to do this...
但问题是，是否需要将输入标签包含在它自己的 DIV 中？如果您可以构建更好的布局来避免这样做，我不会感到惊讶......
