为什么 Chrome 中的'display: block”和'width: auto”不拉伸按钮来填充容器？

为什么“display: block”和“width: auto”不会拉伸按钮来填充容器

应用“display: block”时block”和“width: auto”到按钮，您可能希望它像其他块元素一样拉伸并填充容器。但是，这种行为在最新版本的 Chrome 中不会发生。

了解行为

这种行为的原因在于将按钮分类为“替换元素”。 ”替换元素，包括 input、select、button、img、object 和 textarea 元素，具有特定的默认显示属性。

根据 CSS 规范，替换元素可以具有由外部资源（例如图像）确定的内在尺寸或浏览器控件。例如，如果图像元素的宽度设置为“auto”，它将使用链接图像文件的实际宽度。

此外，替换元素可能具有元素本身施加的视觉格式要求，例如作为表单元素的用户界面控件的外观，这超出了 CSS 的控制。

这如何影响按钮

尽管按钮不被视为纯粹的替换元素，由 W3C 定义，它们在此上下文中的行为类似。默认情况下，它们具有基于内容的内在尺寸，并且“display: block”不会覆盖此行为。

拉伸按钮的解决方案

如果您愿意拉伸按钮来填充容器，您可以使用另一种方法：

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

Flexbox 提供了对元素大小的更多控制，并允许拉伸元素以填充可用空间。

以上是为什么 Chrome 中的'display: block”和'width: auto”不拉伸按钮来填充容器？的详细内容。更多信息请关注PHP中文网其他相关文章！