將它們對齊到同一行的 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>
uj5u.com熱心網友回復：
您可以將h1標簽設定為：display: inline-block。它只會占用它所需的空間。
另一種可能更好的方法是使用 flexbox。Flexbox 可以垂直和/或水平對齊所有專案。
.discount-tab {
display: flex;
flex-direction: row;
align-items: center;
}
uj5u.com熱心網友回復：
你可以這樣使用FlexBox:(在這里你可以閱讀更多關于FlexBox)
.discount-tab {
display: flex;
align-items: center;
}<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>uj5u.com熱心網友回復：
您可以使用網格 display: grid;并為按鈕添加樣式。
.discount-tab {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 4fr 1fr;
}
.mdl-button {
max-width: 100px;
}<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385334.html
上一篇：影片csssvg泵