如何使文本框跨越其容器的 100% 而不会溢出？

控制 100% 宽度的文本框扩展

通常希望文本框跨越其容器的整个宽度。为了实现这一目标，人们可以应用如下样式：

<code class="css">input.wide {
  display: block;
  width: 100%;
}</code>

但是，这种方法面临一个挑战：文本框的宽度是由其内容定义的。文本框上的默认边距、边框和填充会导致其超出容器的边界，从而产生难看的间隙。

要解决此问题，我们需要一种方法让文本框填充其宽度容器不超过它。一种解决方案是利用 CSS3 属性 box-sizing: border-box。此属性重新定义了宽度的含义，以包括外部填充和边框。

不幸的是，对框大小调整的支持尚未普遍。因此，我们可以包含特定于浏览器的后备值：

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

作为使用 box-sizing 的替代方法，可以手动将 padding-right 应用于封闭元素，确保它等于预期的 padding和边框。

这两种方法都允许控制文本框的宽度，同时防止文本溢出到容器的范围之外。

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