我能阻止100%宽度的文本框扩展到容器之外吗？
假设我有一个文本框，我想填充整行。我会给它一个这样的风格：
input.wide {display:block; width: 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>如果运行此命令，您可以通过查看“正常”文本框看到“宽”文本框突出到容器之外。“正常”文本框浮动到容器的实际边缘。我试图让“宽”文本框填充它的容器，而不像“普通”文本框那样扩展到边缘之外。
回答 12
Stack Overflow用户
发布于 2009-03-10 16:32:19
您可以做的是删除input上的默认“附加组件”
input.wide {display:block; width:100%;padding:0;border-width:0}这将使input保持在其容器内。现在，如果您确实需要边框，请将input包装在div中，并在div上设置边框(这样，您也可以从display:block中删除input )。类似于：
<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和边框之间需要多少空间。
Stack Overflow用户
发布于 2009-03-10 04:10:55
有没有办法让文本框在不超出容器宽度的情况下填满它的宽度？
是:通过使用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;
}老式的替代方法是简单地在封闭的元素或元素上放置一个‘padding’的数量，这个数量大约等于你认为浏览器会在‘px’中给出多少额外的左右填充/边框。(对于IE<8，通常为6px。)
Stack Overflow用户
发布于 2015-08-25 15:12:54
这为我解决了这个问题！
不需要外部div.，只需将其应用于给定的文本框即可。
box-sizing: border-box; 使用此属性时，“width和height属性(以及min/max属性)包括内容、填充和边框，但不包括边距”
请参阅w3schools上的属性说明。
希望这对某些人有帮助！
https://stackoverflow.com/questions/628500
复制相似问题
腾讯云开发者
