我可以阻止100％宽度文本框超出其容器吗？
可以说，我有一个文本框，我想填补整行。 我会给它一个这样的风格：
input.wide {display:block; width: 100%} 这会导致问题，因为宽度是基于文本框的内容。 文本框默认具有边距，边框和填充，这使得100％宽度的文本框大于其容器。
例如，在这里右边：
有没有办法让文本框填充容器的宽度，而不是扩展它的容器？
这里是一些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>
如果这是运行的，你可以通过查看“普通”文本框看到“宽”文本框伸出容器外。 “正常”文本框浮动到容器的实际边缘。 我试图让“宽”文本框填充它的容器，没有像“普通”文本框那样超出边界。
你可以做的是删除input的默认“额外”：
input.wide {display:block; width:100%;padding:0;border-width:0}
这将保持在其容器内的input 。 现在，如果你想要边框，将input封装在div ，并在div上设置边框（这样你就可以从input删除display:block ）。 就像是：
<div style="border:1px solid gray;"> <input type="text" class="wide" /> </div>
编辑：另一种select是，而不是从input中删除样式，补偿它在包装的div ：
input.wide {width:100%;} <div style="padding-right:4px;padding-left:1px;margin-right:2px"> <input type="text" class="wide" /> </div>
这会给你在不同的浏览器有不同的结果，但他们不会重叠容器。 div中的值取决于input的边界有多大，以及input和边界之间需要多less空间。
有没有办法让文本框填充容器的宽度，而不是扩展它的容器？
是的：通过使用CSS3属性的'box-sizing：border-box'，你可以重新定义'width'意味着包含外部填充和边框。
不幸的是，因为它是CSS3，支持还不是很成熟，而且spec规范还没有完成，同时在浏览器中有不同的临时名称。 所以：
input.wide { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
旧式的替代方法是简单地在封闭的<div>或<td>元素上添加一些“padding-right”，等于你认为浏览器会在“px”中留下多less额外的左右填充/边框给出意见。 （对于IE <8，通常为6px）
刚刚遇到这个问题，唯一的解决scheme，我可以find在我所有的testing浏览器（IE6，IE7，火狐）工作如下：
- 将input字段包裹在两个独立的DIV中
- 将外部DIV设置为宽度100％，这可以防止我们的容器溢出文档
- 填充内部DIV中的确切数量，以补偿input的水平溢出。
- 在input上设置自定义填充，使其溢出与内部DIV中允许的相同量
代码：
<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>
这里，input元素的总水平溢出是6px – 2x（padding + border） – 所以我们为6px的内部DIV设置了一个填充右边。
这解决了我的问题！
不需要外部div。 只要将它应用到您给定的文本框。
box-sizing: border-box;
使用此属性“宽度和高度属性（和最小/最大属性）包括内容，填充和边框，但不包括边距”
请参阅w3schools的财产说明。
希望这可以帮助别人！
盒子大小的支持实际上是相当不错的： http : //caniuse.com/#search=box-sizing
所以除非你的目标是IE7，否则你应该可以使用这个属性来解决这类问题。 像sass或更less的层使得处理前缀规则更容易，如btw。
实际上，这是因为CSS定义了相对于容器整个宽度的100％，包括边距，边框和填充。 这意味着空间利用。 其内容是一些小于100％，除非容器没有边距，边框或填充。
这是违反直觉的，被许多人广泛认为是我们现在所坚持的错误 。 这实际上意味着％尺寸对于顶级容器以外的其他任何东西都是不利的，即使这样，只有在没有边距，边框或填充的情况下。
请注意，文本字段的边距，边框和填充都包含在为其指定的CSS大小中 – 这是容器的东西。
我已经可以使用98％了，但是这并不是一个完美的解决scheme，因为随着容器变大，input字段往往会进一步缩短。
编辑：我遇到了类似的问题 – 我从来没有尝试给出的答案 ，我不知道它是否适用于您的问题，但它似乎会。
一个解决scheme可能工作（它适用于我）是在input（文本框）应用负边距 …或固定宽度为ie7或降低IE7支持。 这结果像素完美的宽度..对于我的7，所以我加了3和4，但它仍然是像素完美..
我有同样的问题，我讨厌有额外的边界等div！
所以这里是我的解决scheme，似乎工作！
你应该只使用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; }
如果你不能使用box-sizing:border-box你可以尝试移除width:100% ，并在<input>元素中放入一个非常大的属性，但是，缺点是你必须修改html，而不能只用CSS做：
<input size="1000"></input>
如果你不需要dynamic地做（例如，你的表单的宽度是固定的），你可以设置子元素的宽度为容器的宽度减去任何装饰，如填充，边距，等等。：
// 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; }
如果您不能使用框大小（例如，当您使用iText将HTML转换为PDF）。 尝试这个：
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
<div class="input-wrapper"> <input type="text" value="" name="city"/> </div>
这工作：
<div> <input type="text" style="margin: 5px; padding: 4px; border: 1px solid; width: 200px; width: calc(100% - 20px);"> </div>
第一个“宽度”是旧版浏览器的后备规则。
