23

我试图了解这个问题背后的原因：

背后的根本原因是什么，<button>或者<input>当设置为display:block!

我不是在寻找解决此问题的解决方法，因此请不要将我指向此答案，因为它无法回答问题。

这是一个说明问题的js-fiddle

更新 1： @Pete 是正确的，元素的默认 size 属性是在块上设置大小的元素，因为您可以在这个小提琴中设置 size 和 cols 属性<input>并<textarea>更改它们的宽度。这解决了我的部分问题。

考虑到这一点，我现在的问题是，为什么该 <button> 元素的行为不像其他块元素？对我来说是个谜！

4

3 回答 3

13

按钮、输入和其他表单元素实际上是替换元素 - 请参阅此答案：HTML5: Non-replaced vs. Replaced element？

此外，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 。

于 2018-12-28T13:48:57.040 回答
6

我认为为输入的 size 属性分配了一个默认值，这意味着除非您专门覆盖它，否则您的宽度不会是 100%

如果您查看firefox 规范并向下滚动到有关大小的部分，您会看到它们的默认值是 20

我不确定按钮的属性会导致在更改为阻止时不是 100% 宽度

于 2013-05-16T11:31:44.633 回答
2

某些元素如<input>,<textarea>或<button>包含默认样式，例如它们的边框，或者在您的示例中，它们的大小。我认为原因是，HTML 仍然可以与最简单的标记一起使用，并且不需要任何来自 css（或内联属性）的样式即可工作。

display: block不会改变这种行为的事实是，输入字段已经是块元素。但与大多数其他元素相比，它的width属性确实有一个默认值，即 not 0。

我认为原因很简单：如果您创建一个<input>字段并且不使用 css 或样式，您根本不会看到它，就像您看不到 unstyled 一样<div>。

于 2013-05-16T11:47:38.613 回答