首頁 >web前端 >css教學 >為什麼 `width: auto` 不能如預期的 `` 欄位運作,如何讓它們填滿可用空間?

為什麼 `width: auto` 不能如預期的 `` 欄位運作,如何讓它們填滿可用空間?

Linda Hamilton
Linda Hamilton原創
2024-10-30 03:03:28405瀏覽

Why doesn't `width: auto` work as expected for `` fields, and how can I make them fill available space?

width:auto 的行為欄位

問題:

儘管預期區塊級元素的widwidth:autowidwidth:將允許元素填充可用空間,但它似乎不起作用的方式元素。澄清 width:auto 的定義,並提出一個解決方案來實現填充 的可用空間的所需行為。

答案:

的寬度元素是根據其大小屬性計算的,而不是寬度樣式屬性。預設大小值決定初始自動寬度。

要實現填滿可用空間的預期行為,請嘗試設定 width:100% 而不是 width:auto。

範例:

<code class="html"><form action="" method="post" style="width:200px;background:khaki">
  <input style="width:100%" />
</form></code>

附加說明:

要進一步微調寬度,請加入負邊和邊框以取消套用的預設邊距和邊框瀏覽器。這可確保不同瀏覽器之間的一致性,但 Internet Explorer 除外,它以不同的方式套用邊框。

以上是為什麼 `width: auto` 不能如預期的 `` 欄位運作,如何讓它們填滿可用空間?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn