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

带有 Display 的输入：块的行为不像块

在 CSS 中，在元素上设置 display: block 将其指定为块 - level 元素，应填充可用的水平空间。但是，当将此应用于输入元素时，它的行为与常规块元素（例如 div）不同。这是由于输入元素渲染方式上的怪癖造成的。

Width: Auto 未按预期运行

在输入元素上设置 width: auto 不会强制它像 div 元素一样填充容器宽度。这是因为输入元素默认具有固有尺寸和填充，它们会覆盖宽度属性。

实现输入宽度扩展

为了使输入填充可用宽度，可以使用以下选项：

• 固定宽度：这不是一个理想的解决方案，因为它没有考虑输入中不同的内容。
• 包装器解决方法： 在输入周围使用包装器元素可以提供解决方法，但它会添加不必要的 HTML
• Box-Sizing: Border-Box: CSS3 引入了 box-sizing 属性，该属性允许元素当设置为 border-box 时，其内边距和边框包含在其宽度的计算中。

.input-width-full {
  box-sizing: border-box;
  width: 100%;
}

旧版浏览器支持

对于这样做的浏览器不支持 CSS3 box-sizing，可以使用行为文件（.htc）来模拟 border-box 模型。这需要使用条件注释来定位 Internet Explorer 6 和 7。

通过利用这些技术，可以创建动态扩展以填充其容器宽度的输入，即使具有任意填充和边框，确保更灵活和一致的 CSS 布局。

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