我能否阻止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>
编辑：另一种选择是，而不是从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和边界之间需要多少空间。
有什么办法可以让文本框填充容器的宽度，而不会超出它的范围？
是的：通过使用CSS3属性'box-sizing：border-box'，你可以重新定义'width'意味着包含外部填充和边框。
不幸的是，因为它是CSS3，支持并不是非常成熟，并且规格过程尚未完成，同时它在浏览器中有不同的临时名称。 所以：
input.wide {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
老派的替代方法就是在封闭的<div>或<td>元素上添加一定数量的'padding-right'，这相当于您认为浏览器会在'px'中添加多少额外的左右填充/边框给出输入。 （对于IE <8，通常为6px）。
我自己刚刚遇到了这个问题，并且我能在所有测试浏览器（IE6，IE7，Firefox）中找到的唯一解决方案如下：
代码：
<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>
这里，输入元素的总水平溢出是6px - 2x（padding + border） - 所以我们为6px的内部DIV设置了一个填充右边。
链接地址: http://www.djcxy.com/p/76045.html上一篇: Can I stop 100% Width Text Boxes from extending beyond their containers?