html - 同一个div里面的button和heading在不同的行

Question

将它们对齐在同一行中的 css 应该是什么？

<div class="discount-tab">
  <h1 class="discount-heading">Book your first adventure with us at 10% discount</h1>
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Book now</button>
</div>

Answer 1

您可以将h1 标签设置为:display: inline-block。这样只会占用所需的空间。

另一种可能更好的方法是使用 flexbox。 Flexbox 可以垂直和/或水平对齐所有元素。

.discount-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
}