为什么不"显示:阻止"和"宽度:自动"拉伸按钮来填充容器？

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;也可以伸展.

---

只是为了绝对清楚,这不是重复输入显示:块不是一个块,为什么不呢？或任何类似的问题,除非只有答案描述如何拉伸有问题的元素.

编辑:它可能与CSS/DOM中的内容重复,它阻止了带有display:block的输入框扩展到其容器的大小.另一方面,这个问题根本没有提到按钮.你需要阅读答案,找出它也适用于按钮.

Answer 1

有几个元件(<input>,<select>,<button>,<img>,<object>,和<textarea>被认为替换元素其外观和尺寸由外部资源中定义).(例如操作系统,插件等).有了HTML5,你有一对夫妇更喜欢那些中<audio>和<canvas>和多一些.

替换元素可以具有由元素本身定义的内部维度 - 宽度和高度值,而不是文档中的周围环境.例如,如果图像元素的宽度设置为auto,则将使用链接图像文件的宽度.内在维度还定义了一个内在比率,用于确定元素的计算维度,只应指定一个维度.例如,如果仅为图像元素指定宽度,例如100px,并且实际图像宽200像素,高100像素,则元素的高度将缩放相同的量,达到50px.

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

(这个来源的答案的无耻副本和可能的dublicate,从本文中提取了信息.)

请注意 - 正如您将在评论中的讨论中看到的那样 - button并不是w3c定义的替换元素.然而,它的行为就像一种,是指在进一步讨论本文.