Question

当我在按钮上设置display: block;和width: auto;时，我希望按钮可以伸展以填充容器，就像其他块元素一样。出于某种原因，它没有，至少在最新的Chrome中没有。

当谷歌搜索时，我发现很多人都在问同样的问题，谁对“如何拉伸我的按钮来填充容器？”的答案感到满意。那是不是我感兴趣的东西。（我完全能够以任何方式拉伸我的按钮。）检查按钮属性，包括浏览器默认强加的按钮属性也没有帮助我。

我想了解，是什么原因导致按钮忽略display: block; width: auto;并根据其内容保持水平尺寸。

以下是我的意思：

button {
  display: block;
}

<button style="width: auto;">button with `display:block; width:auto;`</button>
<button style="width: 100%;">button with `display:block; width:100%`</button>

我希望带有width:auto;的按钮也可以拉伸。

为了绝对清楚，这不是input with display:block is not a block, why not?或任何类似问题的重复，除非只有答案描述了拉伸相关元素的方法。

编辑：它可能与What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container重复。另一方面，问题根本没有提到按钮。你需要阅读答案，发现它也适用于按钮。

Answer 1

有些元素（<input>，<select>，<button>，<img>，<object>和<textarea>）被视为已被替换外观和尺寸由外部资源定义的元素。（例如操作系统，插件等）。使用HTML5，您可以使用其中的更多内容，例如<audio>和<canvas>以及some more。

替换元素可以具有内在尺寸 - 宽度和高度   由元素本身定义的值，而不是由其定义的值   文件中的环境。例如，如果图像元素具有   width设置为auto，将使用链接图像文件的宽度。   内在维度也定义了以往的内在比率   确定元素的计算尺寸应该只有一个   尺寸必须指定。例如，如果仅指定宽度   对于图像元素 - 例如，100px-并且实际图像是200像素   宽和100像素高，元素的高度将按比例缩放   相同的金额，为50px。

替换元素也可能具有视觉格式要求   由CSS控制之外的元素;例如，用户   为表单元素呈现的界面控件。

（此source and possible dublicate的答案的无耻副本，从this article中提取信息。）

请注意 - 正如您将在评论中的讨论中看到的那样 - button并非真正的replaced element defined by w3c。但它表现得像一个，在this article中进一步讨论。

为什么没有＆＃34;显示：block＆＃34; ＆安培; ＆＃34;宽度：自动＆＃34;拉伸按钮填充容器？

1 个答案: