Html 我可以阻止 100% 宽度的文本框超出其容器吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/628500/
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
Can I stop 100% Width Text Boxes from extending beyond their containers?
提问by Dan Herbert
Lets say I have a text box that I want to fill a whole line. I would give it a style like this:
假设我有一个要填充整行的文本框。我会给它一个这样的风格：
input.wide {display:block; width: 100%}
This causes problems because the width is based on the content of the text box. Text boxes have margin, borders, & padding by default, which makes a 100% width text box larger than its container.
这会导致问题，因为宽度基于文本框的内容。默认情况下，文本框具有边距、边框和填充，这使得 100% 宽度的文本框比其容器大。
For example, here on the right:
例如，在右侧：
Is there any way to make a text box fill the width of its container without expanding beyond it?
有没有办法让文本框填充其容器的宽度而不超出它？
Here is some example HTML to show what I mean:
下面是一些示例 HTML 来展示我的意思：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
#inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
input.wide {display:block; margin: 0px}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
If this is run, you can see by looking at the "normal" text box that the "wide" text box is sticking out beyond the container. The "normal" text box floats to the actual edge of the container. I'm trying to make the "wide" text box fill its container, without expanding beyond edge like the "normal" text box is.
如果运行此命令，您可以通过查看“普通”文本框看到“宽”文本框伸出容器之外。“普通”文本框浮动到容器的实际边缘。我试图让“宽”文本框填充其容器，而不像“普通”文本框那样扩展到边缘之外。
采纳答案by Hilbrand Bouwkamp
What you could do is to remove the default "extras" on the input:
你可以做的是删除默认的“额外” input：
input.wide {display:block; width:100%;padding:0;border-width:0}
This will keep the inputinside its container.
Now if you do want the borders, wrap the inputin a div, with the borders set on the div(that way you can remove the display:blockfrom the inputtoo). Something like:
这将保持input其容器内部。现在，如果您确实想要边框，请将 包裹input在 a 中div，边框设置在 上div（这样您也可以display:block从 中删除input）。就像是：
<div style="border:1px solid gray;">
<input type="text" class="wide" />
</div>
Edit:Another option is to, instead of removing the style from the input, compensate for it in the wrapped div:
编辑：另一种选择是，不是从 中删除样式input，而是在包装中对其进行补偿div：
input.wide {width:100%;}
<div style="padding-right:4px;padding-left:1px;margin-right:2px">
<input type="text" class="wide" />
</div>
This will give you somewhat different results in different browsers, but they will not overlap the container. The values in the div depend on how large the border is on the inputand how much space you want between the inputand the border.
这将在不同的浏览器中为您提供略有不同的结果，但它们不会与容器重叠。div 中的值取决于边框的大小以及边框与边框input之间的空间大小input。
回答by bobince
Is there any way to make a text box fill the width of its container without expanding beyond it?
有没有办法让文本框填充其容器的宽度而不超出它？
Yes: by using the CSS3 property ‘box-sizing: border-box', you can redefine what ‘width' means to include the external padding and border.
是的：通过使用 CSS3 属性“box-sizing:border-box”，您可以重新定义“宽度”的含义以包含外部填充和边框。
Unfortunately because it's CSS3, support isn't very mature, and as the spec process isn't finished yet, it has different temporary names in browsers in the meantime. So:
不幸的是，因为它是 CSS3，支持不是很成熟，并且由于规范过程尚未完成，因此在此期间它在浏览器中具有不同的临时名称。所以：
input.wide {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
The old-school alternative is simply to put a quantity of ‘padding-right' on the enclosing <div> or <td> element equal to about how much extra left-and-right padding/border in ‘px' you think browsers will give the input. (Typically 6px for IE<8.)
老派的替代方法只是在封闭的 <div> 或 <td> 元素上放置一定数量的“padding-right”，这等于您认为浏览器会在“px”中增加多少额外的左右填充/边框给出输入。（对于 IE<8，通常为 6px。）
回答by Hyman Trowbridge
This solved the problem for me!
这为我解决了问题！
Without the need for an external div.Just apply it to your given text box.
无需外部 div。只需将其应用于给定的文本框。
box-sizing: border-box;
With this property "The width and height properties (and min/max properties) includes content, padding and border, but not the margin"
使用此属性“宽度和高度属性（以及最小/最大属性）包括内容、填充和边框，但不包括边距”
See description of property at w3schools.
请参阅w3schools的财产说明。
Hope this helps someone!
希望这可以帮助某人！
回答by Tobias Cohen
Just came across this problem myself, and the only solution I could find that worked in all my test browsers (IE6, IE7, Firefox) was the following:
我自己刚刚遇到了这个问题，我能找到的唯一在我的所有测试浏览器（IE6、IE7、Firefox）中都有效的解决方案如下：
- Wrap the input field in two separate DIVs
- Set the outer DIV to width 100%, this prevents our container from overflowing the document
- Put padding in the inner DIV of the exact amount to compensate for the horizontal overflow of the input.
- Set custom padding on the input so it overflows by the same amount as I allowed for in the inner DIV
- 将输入字段包装在两个单独的 DIV 中
- 将外部 DIV 设置为宽度 100%，这可以防止我们的容器溢出文档
- 将填充放在精确数量的内部 DIV 中以补偿输入的水平溢出。
- 在输入上设置自定义填充，使其溢出的量与我在内部 DIV 中允许的量相同
The code:
编码：
<div style="width: 100%">
<div style="padding-right: 6px;">
<input type="text" style="width: 100%; padding: 2px; margin: 0;
border : solid 1px #999" />
</div>
</div>
Here, the total horizontal overflow for the input element is 6px - 2x(padding + border) - so we set a padding-right for the inner DIV of 6px.
在这里，输入元素的总水平溢出是 6px - 2x(padding + border) - 所以我们为 6px 的内部 DIV 设置了一个 padding-right。
回答by chikamichi
box-sizing support is pretty good actually: http://caniuse.com/#search=box-sizing
box-sizing 支持实际上非常好：http: //caniuse.com/#search=box-sizing
So unless you target IE7, you should be able to solve this kind of issues using this property. A layer such as sass or less makes it easier to handle prefixed rules like that, btw.
因此，除非您面向 IE7，否则您应该能够使用此属性解决此类问题。诸如 sass 或更少的层可以更轻松地处理这样的前缀规则，顺便说一句。
回答by Lawrence Dol
Actually, it's because CSS defines 100% relative to the entire width of the container, including its margins, borders, and padding; that means that the space avail. to its contents is some amount smaller than 100%, unless the container has no margins, borders, or padding.
实际上，这是因为 CSS 相对于容器的整个宽度定义了 100%，包括它的边距、边框和填充；这意味着空间可用。其内容的数量小于 100%，除非容器没有边距、边框或填充。
This is counter-intuitive and widely regarded by many to be a mistake that we are now stuck with. It effectively means that % dimensions are no good for anything other than a top level container, and even then, only if it has no margins, borders or padding.
这是违反直觉的，许多人普遍认为这是我们现在坚持的错误。它实际上意味着 % 维度除了顶级容器之外没有任何好处，即使如此，也只有当它没有边距、边框或填充时。
Note that the text field's margins, borders, and padding areincluded in the CSS size specified for it - it's the container's which throw things off.
请注意，文本字段的边距、边框和内边距都包含在为其指定的 CSS 大小中——这是容器的内容。
I have tolerably worked around it by using 98%, but that is a less than perfect solution, since the input fields tend to fall further short as the container gets larger.
我已经通过使用 98% 来解决它，但这不是一个完美的解决方案，因为随着容器变大，输入字段往往会变得更短。
EDIT: I came across this similar question- I've never tried the answergiven, and I don't know for sure if it applies to your problem, but it seems like it will.
回答by siddhadev
If you can't use box-sizing:border-boxyou could try removing the width:100%and putting a very large sizeattribute in the <input>element, drawback is however you have to modify the html, and can't do it with CSS only:
如果您不能使用，box-sizing:border-box您可以尝试删除width:100%并size在<input>元素中放置一个非常大的属性，但缺点是您必须修改 html，并且不能仅使用 CSS：
<input size="1000"></input>
回答by GorillaApe
One solution that may work (it works for me) is to apply negative margin at input (textbox)... or fixed width for ie7 or to drop ie7 support. This results to pixel perfect width.. For me its 7 so i added 3 and 4 but it is still pixel perfect..
一种可行的解决方案（对我有用）是在输入（文本框）处应用负边距……或为 ie7 应用固定宽度或放弃对 ie7 的支持。这导致像素完美的宽度.. 对我来说它是 7 所以我添加了 3 和 4 但它仍然是像素完美的..
I had the same problem and i hated to have extra divs for border etc!
我遇到了同样的问题，我讨厌为边框等添加额外的 div！
So here is my solution which seems to work!
所以这是我的解决方案，它似乎有效！
You should use a ie7 only stylesheet to avoid the starhacks.
您应该使用仅限 ie7 的样式表来避免 Starhacks。
input.text{
background-color: #fbfbfb;
border : solid #eee 1px;
width: 100%;
-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 32px;
*line-height:32px;
*margin-left:-3px;
*margin-right:-4px;
display: inline;
padding: 0px 0 0 5px;
}
回答by Avishai
If you don't need to do it dynamically (for example, your form is of a fixed width) you can just set the width of child <input>elements to the width of their container minus any decorations like padding, margin, border, etc.:
如果您不需要动态执行此操作（例如，您的表单具有固定宽度），您只需将子<input>元素的宽度设置为其容器的宽度减去填充、边距、边框等任何装饰：
// the parent div here has a width of 200px:
.form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] {
font-size: 16px;
height: auto;
display: block;
width: 280px;
margin-bottom: 15px;
padding: 7px 9px;
}
回答by robertad
If you can't use box-sizing (e.g. when you convert HTML to PDF using iText). Try this:
如果您不能使用 box-sizing（例如，当您使用 iText 将 HTML 转换为 PDF 时）。尝试这个：
CSS
CSS
.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; }
.input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }
HTML
HTML
<div class="input-wrapper">
<input type="text" value="" name="city"/>
</div>
