1 回答

TA貢獻2021條經驗 獲得超8個贊
您需要添加vertical-align: top;到您的.square.
的是默認的display,而設置為。buttoninline-blockvertical-alignbaseline
當有空的和有內容的時,內容(即字符x)將自動對齊到其余部分的基線 - 由于其他內容是空的,它會對齊到其框的底部。
vertical-align: top您可以通過添加到按鈕來解決此問題:
.square {
height: 70px;
width: 70px;
background-color: #fff;
border: 1px solid #000;
outline: none;
margin: 2px;
}
.row-2 .square {
vertical-align: top;
}
<h2>Before</h2>
<div class="row">
<button class="square"></button>
<button class="square">x</button>
<button class="square"></button>
</div>
<h2>After</h2>
<div class="row-2">
<button class="square"></button>
<button class="square">x</button>
<button class="square"></button>
</div>
添加回答
舉報