javascript - 填写文本时按钮移动得很奇怪

That is the missalignment因此，我想使用纯 JavaScript、HTML 和 CSS 在网页上编写 TicTacToe 程序。我已经做了一些逻辑，因此板可以根据数组中的条目进行更新，但是当我这样做时，按钮不再排成一行，而且看起来非常糟糕。预期结果:文本填充到按钮中，按钮保留在其位置。实际结果:文本被填充，但按钮向下移动。 HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <script src="scripts.js"></script>
        <title>My Website</title>
    </head>
    <body>
        <div id="board">
            <div id="row1">
            <button class="field"> </button>
            <button class="field"> </button>
            <button class="field"> </button>
            </div>
            <div id="row2">
            <button class="field"> </button>
            <button class="field"> </button>
            <button class="field"> </button>
            </div>
            <div id="row3">
            <button class="field"> </button>
            <button class="field"> </button>
            <button class="field"> </button>
            </div>
        </div>
    </body>
</html>

CSS:

.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%;
}

JS:

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);
}

最佳答案

您需要对行进行一些控制。尝试在 #row1、#row2、#row3

处使用 display: flex

关于javascript - 填写文本时按钮移动得很奇怪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64847163/

javascript - 填写文本时按钮移动得很奇怪

上一篇：r - 比较并计算两列中条目对的频率

下一篇：sql - 找到每艘船上的水手