為什麼 `width: auto` 不能按 `` 元素的預期工作？

寬度：的自動欄位

在CSS 中，區塊級元素的width:auto 通常意味著寬度將擴展以填滿可用空間。但是，此行為不適用於 。

width:auto 對 有何作用？

的預設大小屬性是元素決定其初始寬度。 width:auto 只是將 的寬度設為預設大小。

實現所需的行為

強制 要佔用 100% 的可用寬度，請使用 width:100% 而不是 width:auto。但是，由於瀏覽器邊框渲染的變化，這可能會遇到不一致的情況。

替代方法

填充 的可用寬度的另一種方法是刪除size 屬性並指定：

<code class="css">input {
  width: 100%;
  margin: -3px;
  border: 2px inset #eee;
}</code>

此方法消除了預設寬度並提供跨瀏覽器的一致行為。它從邊距中減去 3 個像素來偏移邊框的寬度和縮排。

以上是為什麼 `width: auto` 不能按 `` 元素的預期工作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！