如何使文本框宽度为 100% 而不会溢出其容器？

克服 100% 宽度文本框的界限

在 Web 开发中，经常会遇到确保文本框完全占据的困境它们的预期宽度不超过其容器的边界。使用“display:block; width: 100%”分配 CSS 样式可能看起来是一个简单的解决方案，但由于文本框中的默认边距、边框和填充，它可能会导致意外问题。

这可以导致文本框看起来比实际容器大小更宽，如下例所示：

<code class="html"><div id="outer">
  <div id="inner">
    <input type="text" class="wide">
    <div style="clear:both;"></div>
  </div>
</div></code>

实现所需效果

要解决此问题并确保为了使文本框不超过其容器的宽度，CSS3 引入了属性“box-sizing: border-box”。这重新定义了“宽度”的定义，以包含内部填充和外部边框。

但是，由于 CSS3 的不断发展，该属性目前在不同浏览器中具有不同的名称：

<code class="css">input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}</code>

旧版浏览器的替代方法

如果浏览器兼容性是一个问题，另一种方法是将“padding-right”添加到包含的

中。或元素。这补偿了浏览器通常分配给输入的额外左右填充/边框（例如，IE

以上是如何使文本框宽度为 100% 而不会溢出其容器？的详细内容。更多信息请关注PHP中文网其他相关文章！