我可以阻止100% 宽度的文本框扩展到其容器之外吗？

假设我有一个文本框，需要填满整行。我会给它一个这样的风格:

input.wide {display:block; width: 100%}

这会导致问题，因为宽度基于文本框的内容。默认情况下，文本框具有边距、边框和填充，这使得100% 宽度的文本框大于其容器。

例如，在右边这里:

enter image description here

有没有办法使文本框填充其容器的宽度而不扩展到容器之外？

下面是一些 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>

如果运行这个命令，您可以通过查看“普通”文本框看到“宽”文本框伸出容器之外。“正常”文本框浮动到容器的实际边缘。我试图让“宽”文本框填充其容器，而不像“普通”文本框那样扩展到边缘以外。

113710 次浏览
小开

实际上，这是因为 CSS 相对于容器的整个宽度定义了100% ，包括它的边距、边框和填充; 这意味着空间是有效的。除非容器没有边距、边框或填充物，否则容器内容物的数量小于100% 。

这是违反直觉的，而且被许多人普遍认为是一个错误，我们现在被困在这个错误中。它实际上意味着% 维度只适用于顶级容器，而且即使是顶级容器，也只有在它没有边距、边框或填充的情况下才适用。

请注意，文本字段的边距、边框和填充 是都包含在为其指定的 CSS 大小中——这是容器的值。

通过使用98% ，我已经很好地解决了这个问题，但这不是一个完美的解决方案，因为随着容器变大，输入字段往往会变得更短。

编辑: 我遇到了这个 类似的问题-我从来没有尝试过的 回答给予，我不知道它是否适用于你的问题，但它似乎会。

小开

有没有办法使文本框填充其容器的宽度而不扩展到容器之外？

是: 通过使用 CSS3属性‘ box-size: orders-box’，您可以重新定义‘ width’的含义，以包括外部填充和边框。

不幸的是，因为它是 CSS3，所以支持还不是很成熟，而且由于规范过程还没有完成，在此期间浏览器中有不同的临时名称。所以:

input.wide {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

老式的替代方法只是简单地在封闭的 < div > 或 < td > 元素上添加一定数量的“ padd- right”，这个数量等于你认为浏览器会在“ px”中给输入多少额外的左右填充/边框。(IE < 8通常为6px。)

小开
最佳答案

你可以做的是删除 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和边框之间需要多少空间。

小开

我自己也碰到过这个问题，我能找到的在我所有的测试浏览器(IE6，IE7，Firefox)中都有效的唯一解决方案如下:

  1. 将输入字段包装在两个独立的 DIV 中
  2. 将外部 DIV 设置为宽度100% ，这可以防止容器溢出文档
  3. 在内部 DIV 中放置精确数量的填充，以补偿输入的水平溢出。
  4. 在输入上设置自定义填充，使其溢出量与内部 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>

在这里，输入元素的总水平溢出为6px-2x (填充 + 边界)-因此我们为内部 DIV 设置了一个填充-右边的6px。

小开

一个可行的解决方案(对我来说是可行的)是应用 输入端负边距(文本框)... 或者为 ie7设置固定宽度，或者放弃 ie7支持。 这样可以得到像素完美宽度。.对我来说它是7，所以我加了3和4，但它仍然是完美的像素。.

我有同样的问题，我讨厌有额外的 div 为边界等！

因此，这里是我的解决方案，似乎工作！

您应该使用 ie7 only 样式表来避免 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;


}
小开

箱子大小的支持实际上非常好: http://caniuse.com/#search=box-sizing

因此，除非您的目标是 IE7，否则您应该能够使用此属性解决此类问题。另外，诸如 sass 或 less 这样的层可以更容易地处理这样的前缀规则。

小开

如果你不能使用 box-sizing:border-box，你可以尝试删除 width:100%并在 <input>元素中放入一个非常大的 size属性，但是缺点是你必须修改 html，而且不能仅仅使用 CSS:

<input size="1000"></input>
小开

如果你不需要动态地去做(例如，你的表单是固定宽度的) ，你可以将子 <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;
}
小开

如果你不能使用框大小(例如当你使用 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; }

超文本标示语言

<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>

第一个“宽度”是旧版浏览器的备用规则。

小开

这解决了我的问题！

不需要外部 div。 只需将其应用于给定的文本框。

box-sizing: border-box;

使用此属性“宽度和高度属性(以及 min/max 属性)包括内容、填充和边框，但不包括边距”

请参阅 W3学校的属性说明。

希望这对谁有帮助！

小开

只需设置输入的样式以抵消额外的填充。在下面的例子中，左边和右边的输入填充为10px，总的填充偏移量为20px:

input[type=text]{
width: calc(100% - 20px);
}

提交答案