【问题标题】:Issue with tic tac toe interface井字游戏界面问题
【发布时间】:2016-07-08 23:59:14
【问题描述】:

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

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 标签。

【问题讨论】:

    标签: html css


    【解决方案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

    【讨论】:

    • @Danny908,检查更新的 codepen url codepen.io/nagasai/pen/OXxVvA..Hope 这对你有用 :)
    • @Naga Sai A,感谢您的回答,现在工作完美:D
    • 谢谢@Danny908,您能否将我的帖子标记为已回答:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-07-31
    相关资源
    最近更新 更多