Die Schaltfläche bewegt sich seltsam, wenn der Text ausgefüllt wird ⇐ CSS

[Guest]

Ich wollte Tictactoe auf einem programmieren Webseite mit einfachem JavaScript, HTML und CSS. Ich habe eine Logik erstellt, damit die Platine basierend auf den Einträgen in einem Array aktualisieren kann, aber wenn ich das mache, sind die Schaltflächen nicht mehr in einer Zeile und es sieht wirklich schlecht aus. < /P>
Erwartete Ergebnisse: Der Text wird in die Schaltfläche gefüllt, die Schaltfläche bleibt an der Stelle. />

Code: Select all

function game() {
this.board = [
" ", "x ", " ",
" ", " ", " ",
" ", " ", " x"
]
this.printBoard = function(buttons) {
for(i = 0; i < buttons.length; i++) {
buttons[i].innerHTML = this.board[i];
}
}
}

window.onload = function() {
let buttons = document.getElementsByClassName("field");
let myGame = new game();
myGame.printBoard(buttons);
}< /code>
.field {
display: inline-block;
border-style: solid;
background-color: white;
height: 100px;
width: 100px;
font-size: 10px;
}

#board {
margin-left: 40%;
margin-top: 20%;
height: 50%;
}< /code>





My Website