为什么'display: block”在输入元素上不能按预期工作？

理解带有 Display: Block 的输入元素的怪癖

在 CSS 中，将元素的 display 属性设置为 block 会将其变成块级元素，通常跨越其容器的整个宽度。但是，将此属性应用于输入元素可能会导致意外行为。

问题

当将 display: block 应用于文本输入时 ()，它的行为与典型的块级元素不同。相反，输入的尺寸保持不变，只有文本标签出现在一行上。

为什么它不像 Div 那样工作？

这种差异是由于输入元素呈现的独特方式。与主要用于内容布局的 div 不同，输入字段是为用户交互和数据输入而设计的。因此，它们有自己的一组默认样式，该样式会覆盖 display: block 属性。

实现所需的效果

让输入字段填充其容器的宽度像 div 一样，您需要克服默认样式。以下是一些可能的解决方案：

• 添加 max-width: 100%: 此解决方法强制输入字段遵循正常的 CSS 框模型，其中宽度包括填充和边框。
• 使用 box-sizing 属性： CSS3 引入了 box-sizing属性，它允许您指定如何计算元素的宽度。设置 box-sizing：border-box 包括元素宽度中的内边距和边框。

跨浏览器支持

需要注意的是，box并非所有浏览器都支持 -sizing 属性，因此需要附加特定于浏览器的前缀（例如 -moz-box-sizing Firefox）可能是跨浏览器兼容性所必需的。

以上是为什么'display: block”在输入元素上不能按预期工作？的详细内容。更多信息请关注PHP中文网其他相关文章！