按钮显示内联CSS

Question

我有以下CSS和HTML:http://jsfiddle.net/47w0h73r/6/

.one {
  padding: 20px;
  background: #f00;
}
.two {
  padding: 20px;
  background: #00f;
}
a,
button {
  font-family: Arial, Helvetica;
  font-size: 16px;
  padding: 10px;
  background: #fff;
  color: #000;
  display: inline;
  border: 0;
  text-decoration: none;
}

<div class="one"></div>
<div class="two">
  <a href="#">Link</a>
  <button>Button</button>
</div>

正如您将注意到的,该按钮不会显示为inline.为什么是这样？任何人都可以帮我把这个按钮inline,就像它的兄弟姐妹一样a？

问题

通过更改button为a,a您将注意到display: inline使父元素的填充忽略两个子元素的填充,使它们真正显示inline.问题是,button标记实际上并不是内联的,这使得父元素的填充向下推送两个元素.我怎样才能解决这个问题？

Answer 1

这是我最近看到的关于尝试设置按钮的第二个问题display:inline,它似乎引起了一些混乱.无法获得display:inline行为通常归因于它是一个被替换的元素,但这是不正确的,<button>不是一个被替换的元素.

事实上,HTML5规范第10.5.2节按钮元素提出了这个要求:

当按钮绑定应用于按钮元素时,该元素应呈现为"内联块"框,呈现为按钮,其内容是元素的内容.

该语言有点不寻常,但按钮绑定确实适用,结果是绑定优先于display属性的指定值.结果是,display:inline-block无论指定的值是什么,按钮始终呈现为.你无能为力.