为什么字体大小似乎不会影响我创建的按钮

Question

我正在制作一盘国际象棋，有五个按钮用于如果你辞职、如果你打平以及重置游戏。然而，我希望它们看起来更大，而我的css并没有这样做。我尝试过使用font-size: 3rem;，但这似乎不起作用。

这是我的HTML:

div.buttons {
display: flex;
justify-content: center;
font-size: 3rem;
}

<div class="buttons">
<button>Resign for White</button>
<button>Resign for Black</button>
<button>Offer Draw</button>
<button>Accept Draw</button>
<button>RESET GAME</button>
</div>

Answer 1

因为按钮有自己的font-size(在我的Chrome中是13px而不是inherit(，并且您只针对父div。

div.buttons {
display: flex;
justify-content: center;
font-size: 3rem;
}
div.buttons button {
font-size: inherit;
}

<div class="buttons">
<button>Resign for White</button>
<button>Resign for Black</button>
<button>Offer Draw</button>
<button>Accept Draw</button>
<button>RESET GAME</button>
</div>

或者您可以直接将字体大小设置为按钮：

div.buttons {
display: flex;
justify-content: center;
}
div.buttons button {
font-size: 3rem;
}

<div class="buttons">
<button>Resign for White</button>
<button>Resign for Black</button>
<button>Offer Draw</button>
<button>Accept Draw</button>
<button>RESET GAME</button>
</div>

Answer 2

你的CSS是错误的，你必须像下面这样修复它：

div button {
display: flex;
justify-content: center;
font-size: 3rem;
}

<div>
<button>Resign for White</button>
<button>Resign for Black</button>
<button>Offer Draw</button>
<button>Accept Draw</button>
<button>RESET GAME</button>
</div>

Answer 3

.buttons {
display: flex;
justify-content: center;
}
.buttons  button {
font-size: 3rem;
}

<div class="buttons">
<button>Resign for White</button>
<button>Resign for Black</button>
<button>Offer Draw</button>
<button>Accept Draw</button>
<button>RESET GAME</button>
</div>