为什么 `display: block` 不让我的输入元素填充其容器的宽度？

输入元素未通过“Display:block”扩展到块容器宽度

尽管将“display:block”分配给输入元素，它的行为可能不像 div 并填充容器宽度。这种偏差源于 CSS 中输入元素的固有行为。

在 CSS 中，“display:block”通常允许元素展开并占据全部可用宽度。但是，输入元素被设计为将“display:inline”作为默认显示模式。这意味着它们只会占用内容的宽度，包括任何填充和边框。

要解决此问题并强制输入元素填充宽度，可以使用“width:100%”。但是，如果输入具有非零填充和边框，这种方法可能会出现问题，因为它将导致最终宽度超过 100%。

使用 CSS3 'box-sizing 的跨浏览器解决方案'

一个全面的解决方案涉及使用 CSS3 中相对未知的 'box-sizing:border-box' 属性。此属性确保输入元素（或任何其他元素）的宽度包括其内边距和边框。

这里提供了 CSS 代码的修改版本：

form { display: block; margin: 0; padding: 0; width: 50%; border: 1px solid green; overflow: visible }
div, input { display: block; border: 1px solid red; padding: 5px; width: 100%; font: normal 12px Arial; }

.bb {
    box-sizing: border-box; /* CSS 3 rec */
    -moz-box-sizing: border-box; /* Firefox 2 */
    -ms-box-sizing: border-box; /* Internet Explorer 8 */
    -webkit-box-sizing: border-box; /* Safari 3 */
    -khtml-box-sizing: border-box; /* Konqueror */
}

通过添加'.bb' 类添加到输入元素，您可以启用 'box-sizing:border-box' 以实现跨浏览器兼容性。这可确保输入元素始终占据完整的可用宽度，无论其填充和边框如何。

附加说明：

1. Internet Explorer 6 和7 不支持 CSS3 'box-sizing'，但可以使用行为脚本启用它。
2. The大多数现代浏览器都支持“box-sizing:border-box”属性，包括 Google Chrome、Firefox、Safari 和 Opera。

以上是为什么 `display: block` 不让我的输入元素填充其容器的宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！