井字界面问题

Question

我正在为学校项目制作一个井字游戏，我已经有了界面，但是当我插入文本时，所有行都向下移动。

界面图片...

文本插入...

这是我的 html 代码...

<div id="game-space">
    <label class="casilla"></label>
    <label class="casilla">X</label>
    <label class="casilla"></label>
    <br>
    <label class="casilla"></label>
    <label class="casilla"></label>
    <label class="casilla"></label>
    <br>
    <label class="casilla"></label>
    <label class="casilla"></label>
    <label class="casilla">O</label>
</div>
    <br>
    <button id="new-game">Juego Nuevo</button>

这是我的 css 代码...

#game-space{
    margin: 0 auto;
    width: 310px;
    height: 310px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
}
.casilla{
    width: 100px;
    height: 100px;
    border: solid 10px rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    background-color: white;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0;
}

我也使用了div、p 和按钮标签。

Answer 1

为了达到预期的结果，请使用下面的 CSS 并删除 html
中的 br 标签1.删除了br标签
2.增加了游戏空间分区
的宽度和高度3.用于溢出：隐藏用于卡西利亚div，因为div内容永远不会超过显示滚动（因为值仅为X O）

#game-space{
    margin: 0 auto;
    width: 370px;
    height: 370px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
}
.casilla{
    width: 100px;
    height: 100px;
    border: solid 10px rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    background-color: white;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0;
    overflow:hidden;
}

http://codepen.io/nagasai/pen/OXxVvA