Кнопка странно движется, когда текст заполняется ⇐ Html

[Anonymous]

Я хотел запрограммировать Tictactoe на Веб -страница, используя простой JavaScript, HTML и CSS. Я сделал некоторую логику, поэтому плата может обновляться на основе записей в массиве, но когда я это делаю, кнопки больше не в линии, и это выглядит очень плохо. < /P>
Ожидаемый результат: текст заполняется в кнопку, кнопка остается на своем месте.
Фактический результат: текст заполняется, но кнопка движется вниз. />

Код: Выделить всё

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




 
 
 

 
 
 

 
 
 

Подробнее здесь: https://stackoverflow.com/questions/648 ... -filled-in