為什麼 Chrome 中的'display: block”和'width: auto”不拉伸按鈕來填充容器？

為什麼“display: block”和“width: auto”不會拉伸按鈕來填充容器

應用“display: block”時block」和「width: auto」到按鈕，您可能希望它像其他區塊元素一樣拉伸並填充容器。但是，這種行為在最新版本的Chrome 中不會發生。

了解行為

這種行為的原因在於將按鈕分類為「替換元素」。屬性。

根據 CSS 規範，替換元素可以具有由外部資源（例如圖片）決定的內在尺寸或瀏覽器控制項。例如，如果圖像元素的寬度設定為“auto”，它將使用連結圖像檔案的實際寬度。

此外，替換元素可能具有元素本身施加的視覺格式要求，例如作為表單元素的使用者介面控制項的外觀，這超出了 CSS 的控制。

這如何影響按鈕

儘管按鈕不被視為純粹的替換元素，由 W3C 定義，它們在此上下文中的行為類似。預設情況下，它們具有基於內容的內在尺寸，並且“display: block”不會覆寫此行為。

拉伸按鈕的解決方案

如果您願意拉伸按鈕來填充容器，您可以使用另一種方​​法：

<code class="css">button {
  display: flex;
  width: 100%;
}</code>

Flexbox 提供了對元素大小的更多控制，並允許拉伸元素以填充可用空間。

以上是為什麼 Chrome 中的'display: block”和'width: auto”不拉伸按鈕來填充容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！