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