我想了解这个问题背后的原因：
什么是背后的根本原因<button>或<input>元素不表现得像当设置为其他元素display:block ！
我不是在寻找解决方法来解决这个问题，所以请不要点我这个答案 ，因为它没有回答这个问题。
这里有一个JS-小提琴说明该问题
更新1：@Pete是正确的，元素的默认大小属性是什么套即使在块的大小，如可以在此小提琴的大小和cols属性<input>和<textarea>改变它们的宽度。 这解决了我的问题的一部分。
考虑到这一点，我的问题是现在，为什么是 <button> 元素行为不象其他块元素？ 这是一个谜给我！
我认为，一个默认值被分配到输入的大小属性，这意味着，除非你专门重写它，你的宽度不会是100％
如果你看一下Firefox的规范 ，并向下滚动至大小节，你可以看到，他们有20的默认值
我不知道这一点会导致改为块时不要被100％的宽度按钮的特性
像一些元素<input> <textarea>或<button>有默认样式包括在内，像他们的边界，或者在你的例子，它们的大小。 我想原因是，HTML还有待与简单的标记使用，并不需要从CSS（或内联属性）的任何造型工作。
该事实display: block不改变这种行为是，输入字段已经是块元素。 但与大多数其它元素它确实对一个默认值width属性这不是0 。
我想原因很简单：如果你创建<input>字段，不使用CSS或样式，你根本不会看到它，就像你没有看到无样式<div>
按钮，输入和其他形式的元素实际上替换元素-看到这样的回答： HTML5：非替换与替换元素？
此外， button和input是内联的元素。 因此，在这里读关于视觉格式的文档MDN： https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model ，以及W3C的文档在这里： https://www.w3.org /TR/CSS21/visudet.html#inline-replaced-width ，可以得出结论，用于替换内联元素：
如果“高度”和“宽度”都已经计算“自动”和元件的值也具有固有的宽度，则该固有宽度为“宽度”的使用的值。
因此，按钮和输入具有固有的宽度设置为它们的内容（或输入的大小属性，如果使用的话）。 这就是为什么只要指定display: block没有做任何按钮或输入的大小。 您也可以覆盖元素的内在宽度。
更新 ：虽然研究回答这个问题后多了，我发现了一个更古老的答案，进入这个同样的问题，更多的细节。 你可以在这里找到： https://stackoverflow.com/a/27605483/630170 。
