為什麼「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中文網其他相關文章！