Question

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

这是我的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.使用溢出：隐藏为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

tic tac toe界面问题

1 个答案: