井字游戏界面问题

Question

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

Interface picture...

Text inserted...

这是我的 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 和 button 标签。

Answer 1

为达到预期效果，请使用下面的 CSS 并删除 html 中的 br 标签
1.移除br标签
2.增加游戏空间div的宽高
3.Used overflow:hidden for the casilla 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