首頁 > web前端 > css教學 > 為什麼 `display: block` 不讓輸入元素填滿其容器寬度?

為什麼 `display: block` 不讓輸入元素填滿其容器寬度?

Patricia Arquette
發布: 2024-11-30 10:38:10
原創
408 人瀏覽過

Why Doesn't `display: block` Make an Input Element Fill Its Container Width?

帶有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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板