HTML井字棋游戏按钮内容变更后下移的CSS问题求助

问题根源 #

按钮点击后出现偏移，核心原因是空按钮与包含文本（X/O）的按钮默认垂直对齐方式不一致——浏览器会根据元素内容自动调整inline-block元素的垂直对齐位置。另外你的按钮CSS里仅设置了border-color但未指定border-style，导致边框实际不显示。

修复方案 #

1. 统一按钮垂直对齐与基础样式

在基础按钮CSS中添加vertical-align: middle，确保无论按钮是否有文本，对齐方式完全一致；同时修正边框设置，让边框正常显示：

button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: 1px solid #000; /* 替换单独的border-color，直接设置完整边框 */
    cursor: pointer;
    transition: background-color 0.3s;
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
    vertical-align: middle; /* 关键：统一垂直对齐 */
    text-align: center; /* 可选：让X/O居中显示 */
    font-size: 18px; /* 可选：增大符号字号，提升辨识度 */
}

2. 优化重启按钮样式（可选）

移除重启按钮中冲突的min-height: 0px，并添加间距让布局更整洁：

.restart {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: 1px solid #000;
    cursor: pointer;
    transition: background-color 0.3s;
    max-width: 100px;
    border-radius: 12px;
    margin-top: 10px; /* 新增：和棋盘拉开距离 */
}

3. 用Grid重构棋盘布局（可选）

替换原生<br>换行，用Grid布局实现更稳定的3x3棋盘：

<div class="board">
    <button onclick="change('1', '0')" id="1"></button>
    <button onclick="change('2', '1')" id="2"></button>
    <button onclick="change('3', '2')" id="3"></button>
    <button onclick="change('4', '3')" id="4"></button>
    <button onclick="change('5', '4')" id="5"></button>
    <button onclick="change('6', '5')" id="6"></button>
    <button onclick="change('7', '6')" id="7"></button>
    <button onclick="change('8', '7')" id="8"></button>
    <button onclick="change('9', '8')" id="9"></button>
</div>

对应添加容器CSS：

.board {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    gap: 2px; /* 按钮间的小间隙，提升视觉区分度 */
}

完整修复后的代码 #

JavaScript（无需修改）

let grid = ["-", "-", "-", "-", "-", "-", "-", "-", "-"];
let clicked = [true, true, true, true, true, true, true, true, true];
let turn = 'X';
function win(player) {
  document.getElementById('ptu').innerHTML = "Player " + turn + " wins";
  for (var i = 0; i < 9; i++) {
      clicked[i] = false;
  }
}
document.getElementById('ptu').innerHTML = "Turn: X";
    
function change(button, id) {
    if (clicked[id]) {
        document.getElementById(button).innerHTML = turn;
        grid[id] = turn;

        clicked[id] = !clicked[id];
        if (turn == 'X') {
            document.getElementById('ptu').innerHTML = "Turn: O";
        } else {
            document.getElementById('ptu').innerHTML = "Turn: X"
        }

        if (grid[0] == turn && grid[1] == turn && grid[2] == turn) {
            win(turn);
        } else if (grid[0] == turn && grid[3] == turn && grid[6] == turn) {
            win(turn);
        } else if (grid[6] == turn && grid[7] == turn && grid[8] == turn) {
            win(turn);
        } else if (grid[8] == turn && grid[5] == turn && grid[2] == turn) {
            win(turn);
        } else if (grid[0] == turn && grid[4] == turn && grid[8] == turn) {
            win(turn);
        } else if (grid[2] == turn && grid[4] == turn && grid[6] == turn) {
            win(turn);
        } else if (grid[1] == turn && grid[4] == turn && grid[7] == turn) {
            win(turn);
        } else if (grid[3] == turn && grid[4] == turn && grid[5] == turn) {
            win(turn);
        }
        if (turn == 'X') {
            turn = 'O';
        } else {
            turn = 'X';
        }
    }
}

CSS

button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: 1px solid #000;
    cursor: pointer;
    transition: background-color 0.3s;
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
    vertical-align: middle;
    text-align: center;
    font-size: 18px;
}
button:hover {
    background-color: #0056b3;
}
.restart {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: 1px solid #000;
    cursor: pointer;
    transition: background-color 0.3s;
    max-width: 100px;
    border-radius: 12px;
    margin-top: 10px;
}
.board {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    gap: 2px;
}
html {
    font-family: sans-serif;
}

HTML

<html>
    <head>
        <style>
            /* 上述CSS内容 */
        </style>
    </head>
    <body>   
        <div class="board">
            <button onclick="change('1', '0')" id="1"></button>
            <button onclick="change('2', '1')" id="2"></button>
            <button onclick="change('3', '2')" id="3"></button>
            <button onclick="change('4', '3')" id="4"></button>
            <button onclick="change('5', '4')" id="5"></button>
            <button onclick="change('6', '5')" id="6"></button>
            <button onclick="change('7', '6')" id="7"></button>
            <button onclick="change('8', '7')" id="8"></button>
            <button onclick="change('9', '8')" id="9"></button>
        </div>
        <p id="ptu"></p>
        <p id="pwi"></p>
        <button class="restart" onclick="clicked = [true, true, true, true, true, true, true, true, true]; grid = ['-', '-', '-', '-', '-', '-', '-', '-', '-']; turn = 'X'; document.getElementById('1').innerHTML = ''; document.getElementById('2').innerHTML = ''; document.getElementById('3').innerHTML = ''; document.getElementById('4').innerHTML = ''; document.getElementById('5').innerHTML = ''; document.getElementById('6').innerHTML = ''; document.getElementById('7').innerHTML = ''; document.getElementById('8').innerHTML = ''; document.getElementById('9').innerHTML = ''; document.getElementById('ptu').innerHTML = 'Turn: X'; ">Restart</button>
    </body>
</html>

内容的提问来源于stack exchange，提问作者MrMan179