1 回答

TA貢獻(xiàn)2021條經(jīng)驗(yàn) 獲得超8個(gè)贊
您需要添加vertical-align: top;到您的.square.
的是默認(rèn)的display,而設(shè)置為。buttoninline-blockvertical-alignbaseline
當(dāng)有空的和有內(nèi)容的時(shí),內(nèi)容(即字符x)將自動(dòng)對齊到其余部分的基線 - 由于其他內(nèi)容是空的,它會(huì)對齊到其框的底部。
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>
添加回答
舉報(bào)