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？

一样

ISSUE

通过将button更改为a，您会注意到display: inline使父元素的填充忽略两个子元素的填充，使它们真正显示{{ 1}}。问题是，inline标记实际上并不是内联的，这使得父元素的填充向下推送两个元素。我该如何解决这个问题？

Answer 1

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

事实上，the HTML5 spec Section 10.5.2 The button element提出了这个要求：

当按钮绑定应用于按钮元素时，该元素为期望呈现为“内联块”＆＃39;框呈现为一个按钮内容是元素的内容。

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

Answer 2

将line-height:17px;添加到a, button，这应该使它们相同

＆＃13;

.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;
  line-height: 17px;
}

＆＃13;

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

＆＃13;

按钮显示内联CSS

ISSUE

2 个答案: