此问题已在此处有答案：
What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container（6个答案）
3年前关闭。
这篇文章是编辑并提交审查12小时前.
当我在按钮上设置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;的按钮也能被拉伸。
- 需要明确的是，上面的问题不是this或任何类似问题的重复，这些问题的答案只描述了如何拉伸所讨论的元素。
- 以上内容也不是this question的副本。虽然答案在这里也适用，因为显然输入和按钮大小的问题有相同的核心原因，问题根本没有提到按钮。此外，
<button>是否是一个合适的“替换元素”似乎也存在一些不确定性。这篇文章（可以说）很好地服务于引导用户解决问题的目的。
1条答案
按热度按时间f0brbegy1#
有几个元素（
<input>、<select>、<button>、<img>、<object>和<textarea>）被视为替换元素，其外观和尺寸由外部资源定义。（例如，操作系统、插件等）。被替换的元素可以具有内部尺寸-宽度和高度值，这些值由元素本身定义，而不是由其在文档中的周围环境定义。例如，如果图像元素的宽度设置为自动，则将使用链接图像文件的宽度。固有维数还定义了一个固有比率，如果只指定一个维数，则该比率用于确定元素的计算维数。例如，如果只为图像元素指定了宽度（比如100 px），而实际图像的宽度为200像素，高度为100像素，则元素的高度将被缩放相同的量，即50 px。
被替换的元素也可以具有由该元素强加的视觉格式要求，而不受CSS的控制;例如为表单元素呈现的用户界面控件。
在HTML5中，你有更多的像
<audio>和<canvas>这样的东西。请注意，正如您将在评论中的讨论中看到的那样，
button并不是真正的replaced element defined by w3c。然而，它的行为就像一个，这将在this article中进一步讨论。