为什么显示：块不拉伸按钮或输入元素 [英] Why does display:block not stretch buttons or input elements

问题描述

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

I'm trying to understand the reason behind this problem:

< button> 或< input> 元素在设置为！

What's the underlying reason behind <button> or <input> elements not behaving like other elements when set to display:block!

我没有找到解决这个问题的解决方法，所以请不要指向

I'm not looking for workarounds to fix this problem, so please don't point me to this answer because it doesn't answer the question.

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

Update 1: @Pete is correct, the default size attribute of an element is what sets the size even on block, as you can in this fiddle the size and cols attribute of <input> and <textarea> changes their width. That solves part of my question.

考虑到这一点，我的问题是现在，为什么 按钮> 元素的行为不像其他块元素？

推荐答案

我认为默认值被分配给输入的size属性除非你特别重写，否则你的宽度不会是100％。

I think that a default value is assigned to the size attribute of inputs which means unless you specifically override it, your width won't be 100%

如果你看一下 firefox specification ，并向下滚动到关于大小的部分可以看到它们的默认值为20

If you look at the firefox specification and scroll down to the section about size, you can see that they have a default value of 20

我不确定的按钮的属性，导致不是100％的宽度，当更改为块

I'm not sure about the properties for the button that cause that not to be 100% width when changed to block

这篇关于为什么显示：块不拉伸按钮或输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！