HTML - 按钮是一个内联元素，但？ [英] HTML - button is a inline element but?

问题描述

Button是一个内联元素，但宽度属性在它上面工作，怎么样？
http://jsfiddle.net/3b6r02fh/

 按钮{
 width：300px; 
} 
  

解决方案

大多数浏览器显示<$ c根据（非规范性） w3.org/TR/CSS21/sample.htmlrel =noreferrer>附录D. HTML 4的默认样式表。

因此，您可以期望宽度属性起作用，如计算宽度和边距 - 内嵌块，未被替换。

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

在CSS中，被替换的元素是一个元素，其表示为
，超出了CSS的范围。这些是外部对象，它们的
表示与CSS无关。

因此，它们有一些特殊的行为。例如，不管它们是否具有 display：inline-block 或 display：inline ，它们的大小都是针对 width 属性，根据计算宽度和边距 - 内联，替换为。

值得注意的是，HTML5强制它们显示为 inline-block无论如何，。这在中有解释。10.5.2绑定 - 按钮元素：

  @namespace url（http://www.w3.org/1999/xhtml）; 
 button {binding：button; }  b  

当按钮绑定适用于按钮元素，元素
应该呈现为一个'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:

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independent of the CSS.

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:

@namespace url(http://www.w3.org/1999/xhtml);
button { binding: button; }

When the button binding applies to a button element, the element is expected to render as an 'inline-block' box rendered as a button whose contents are the contents of the element.

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