HTML - 按钮是一个内联元素，但？

问题描述

Button是一个内联元素，但宽度属性在它上面工作，怎么样？

 按钮{
 width：300px; 
} 
  

解决方案

大多数浏览器显示<$ c根据（非规范性）。

因此，您可以期望宽度属性起作用，如。

但并非如此。 按钮元素已被：
$ b

因此，它们有一些特殊的行为。例如，不管它们是否具有 display：inline-block 或 display：inline ，它们的大小都是针对 width 属性，根据。

值得注意的是，HTML5强制它们显示为 inline-block无论如何，。这在：

Button is an inline element, but the width properties work on it, how come?http://jsfiddle.net/3b6r02fh/

button {
    width: 300px;
}

解决方案

Most browsers display button elements as inline-block by default, according to the (not normative) Appendix D. Default style sheet for HTML 4.

Therefore, you could expect the width property to work, as described in Calculating widths and margins - Inline-block, non-replaced.

But it's not just that. button elements are replaced elements:

Therefore, they have some special behavior. For example, independently of whether they have display: inline-block or display: inline, they are sized respecting the width property, according to Calculating widths and margins - Inline, replaced.

It's worth noting that HTML5 forces them to be displayed as inline-block anyways. This is explained in 10.5.2 Bindings - The button element:

这篇关于HTML - 按钮是一个内联元素，但？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！