如何将这些按钮连续对齐？ [英] How to align these buttons in a row?

问题描述

https://jsfiddle.net/2L9mznzu/

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

There are two empty text button, how to align them into a row?

.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>

推荐答案

使用 vertical-align：top 属性添加到您的 .button 。

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>

这篇关于如何将这些按钮连续对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！