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