我试图理解这个问题背后的原因:
设置为后面的原因<button>或者<input>元素不像其他元素那样表现的原因是什么display:block!
我不是在寻找解决这个问题的解决方法,所以请不要指出这个答案,因为它没有回答这个问题.
更新1: @Pete是正确的,元素的默认大小属性是甚至在块上设置大小的内容,因为您可以在其中调整size和cols属性<input>并<textarea>更改其宽度.这解决了我的部分问题.
考虑到这一点,我现在的问题是,为什么 <button> 元素不像其他块元素那样？这对我来说是一个谜!
kum*_*rsh 11
按钮、输入和其他表单元素实际上是替换元素 - 请参阅此答案：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，您可以得出结论，对于替换的内联元素：
如果 'height' 和 'width' 都具有 'auto' 的计算值，并且元素也有一个固有宽度，那么该固有宽度就是 'width' 的使用值。
因此，按钮和输入具有为其内容设置的内在宽度（或输入的大小属性，如果使用）。这就是为什么仅仅指定display: block对按钮或输入的大小没有任何作用的原因。您还必须覆盖元素的固有宽度。
更新：在回答这个问题后进行了更多研究时，我发现了一个更旧的答案，其中详细介绍了同一问题。你可以在这里找到它：https : //stackoverflow.com/a/27605483/630170。
我认为默认值分配给输入的 size 属性，这意味着除非您专门覆盖它，否则您的宽度不会是 100%
如果您查看firefox 规范并向下滚动到有关大小的部分，您会看到它们的默认值为 20
我不确定按钮的属性会导致更改为阻止时不是 100% 宽度
| 归档时间： |
|
| 查看次数： |
4540 次 |
| 最近记录： |