为什么字体大小似乎不会影响我创建的按钮？ [复制]答案

【问题标题】：Why does font-size not appear to affect my buttons that I have created? [duplicate]为什么字体大小似乎不会影响我创建的按钮？ [复制]
【发布时间】：2021-05-20 15:52:05
【问题描述】：

我正在制作一个国际象棋游戏，有五个按钮用于您是否辞职、如果您和棋以及重置游戏。但是，我希望它们看起来更大，而我拥有的 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>

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：