如何将这些按钮排成一行？

Question

https://jsfiddle.net/2L9mznzu/

有两个空文本按钮，如何将它们对齐成一行？

.button {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: gray;
  margin: 0 4px;
  text-align: center;
}

<div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>

Answer 1

使用vertical-align: top您的财产.button。

Vertical-align CSS 属性指定内联或表格单元格框的垂直对齐方式。来源：MDN

请参阅下面的演示：

.button {
  display: inline-block;
  vertical-align: top;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: gray;
  margin: 0 4px;
  text-align: center;
}

<div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>