帶有Display 的輸入:區塊的行為不像區塊
在CSS 中,在元素上設定display: block 將其指定為區塊- level 元素,應填滿可用的水平空間。但是,當將此應用於輸入元素時,它的行為與常規區塊元素(例如 div)不同。這是由於輸入元素渲染方式上的怪癖所造成的。
Width: Auto 未如預期運作
在輸入元素上設定 width: auto 不會強制它像 div 元素一樣填滿容器寬度。這是因為輸入元素預設具有固有尺寸和填充,它們會覆蓋寬度屬性。
實現輸入寬度擴展
為了使輸入填充可用寬度,可以使用以下選項:
.input-width-full { box-sizing: border-box; width: 100%; }
舊版瀏覽器支援
對於這樣做的瀏覽器不支援CSS3 box-sizing,可以使用行為檔案(.htc)來模擬border-box 模型。這需要使用條件註解來定位 Internet Explorer 6 和 7。
透過利用這些技術,可以建立動態擴展以填充其容器寬度的輸入,即使具有任意填充和邊框,確保更靈活和一致的 CSS 佈局。
以上是為什麼 `display: block` 不讓輸入元素填滿其容器寬度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!