如何取得一個 `` 元素來用 `width: auto` 填滿可用空間？

width: auto 對於 意味著什麼？元素？

儘管其普遍理解為填充塊元素可用空間的指令，但 width: auto 對於 的行為有所不同。

width: auto 的定義

CSS 規範沒有明確定義 的 width: auto 的具體行為。元素。然而，它通常表示瀏覽器應該根據元素的內在屬性計算寬度。

實現輸入欄位的期望行為

實現填充的預期行為的可用空間fields:

• 嘗試width: 100%: 這將寬度設定為容器內的剩餘空間，類似於其他區塊級元素的行為。

如果 width: 100% 失敗：

可能是由於預設的 size 屬性，該屬性定義了輸入區域的大小。若要覆寫此設置，請刪除 size 屬性或將其設為空字串（例如 size=""）。

寬度範例：100%:

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

有邊距和邊框的部分解：

若要獲得更精確的解決方案，請在輸入欄位中新增負邊距和插入邊框，如下列程式碼所示：

<code class="html"><div style="padding: 30px; width: 200px; background: red">
  <form style="width: 200px; background: blue; padding: 3px">
    <input style="width: 100%; margin: -3px; border: 2px inset #eee" />
  </form>
</div></code>

以上是如何取得一個 `` 元素來用 `width: auto` 填滿可用空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！