使用CSS调整HTML元素的形状

Question

我想使用CSS在div类中将9个HTML元素制作成相等的正方形。但是，当测量表明它们应该是正方形时，它们是矩形的。

这是我的HTML代码：

<div class= "gameboard">
<input type="button" id="button1" onclick="playerMove('button1')"/><input type="button" id="button2" onclick="playerMove('button2')"/><input type="button" id="button3" onclick="playerMove('button3')"/>
<input type="button" id="button4" onclick="playerMove('button4')"/><input type="button" id="button5" onclick="playerMove('button5')"/><input type="button" id="button6" onclick="playerMove('button6')"/>
<input type="button" id="button7" onclick="playerMove('button7')"/><input type="button" id="button8" onclick="playerMove('button8')"/><input type="button" id="button9" onclick="playerMove('button9')"/>
</div>

这是我的CSS代码：

.gameboard {

    width: 600px;
    height: 600px;
    margin: auto;
    border-radius: 20px;
}

input {
    width: 200px;
    height: 200px;
    font-size: 70px;

}

Answer 1

尝试将其margin和padding重置为0并查看其是否有效。