不能将边距和内边距设置为0

我正在构建一个井字游戏，我用css绘制的棋盘在我插入一个'X'时一直移动，好像'X'有一个margin属性。我把所有的边距和内边距设置为0或无，每次插入一个时，它都会移动我的板。

html代码:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $(".sq").click(function(){
        $(this).html("<em class='x'>X</em>");
    });
});
    </script>
</head>
<body>
<center>
    <div id="gameboard">
            <div class="sq" id="top-left"></div>
            <div class="sq" id="top-mid"></div>
            <div class="sq" id="top-right"></div>
            <div class="sq" id="mid-left"></div>
            <div class="sq" id="mid-mid"></div>
            <div class="sq" id="mid-right"></div>
            <div class="sq" id="bot-left"></div>
            <div class="sq" id="bot-mid"></div>
            <div class="sq" id="bot-right"></div>
    </div>
</center>
</body>
</html>

这里是CSS文件:

div {
    position: static;
}
#gameboard {
    width: 900px;
}
#top-left {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#top-mid {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#top-right {
    border-bottom: 1px solid black;
}
#mid-left {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#mid-mid {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#mid-right {
    border-bottom: 1px solid black;
}
#bot-left {
    border-right: 1px solid black;
}
#bot-mid {
    border-right: 1px solid black;
}
#bot-right {
}
.sq {
    padding: none;
    margin: -5px;
    display: inline-block;
    width: 300px;
    height: 250px;
}
.x {
    padding: 0;
    margin: none;
    font-size: 150px;
}
.o {
    padding: 0;
    margin: 0;
    font-size: 200px;
}

您只需将position:absolute添加到<em>元素(在本例中为x);

div {
    position: static;
}
#gameboard {
    width: 900px;
}
#top-left {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#top-mid {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#top-right {
    border-bottom: 1px solid black;
}
#mid-left {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#mid-mid {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#mid-right {
    border-bottom: 1px solid black;
}
#bot-left {
    border-right: 1px solid black;
}
#bot-mid {
    border-right: 1px solid black;
}
#bot-right {
}
.sq {
    padding: none;
    margin: -5px;
    display: inline-block;
    width: 300px;
    height: 250px;
}
.x {
    padding: 0;
    margin: none;
    font-size: 150px;
    position: absolute;
}
.o {
    padding: 0;
    margin: 0;
    font-size: 200px;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $(".sq").click(function(){
        $(this).html("<em class='x'>X</em>");
    });
});
    </script>
</head>
<body>
<center>
    <div id="gameboard">
            <div class="sq" id="top-left"></div>
            <div class="sq" id="top-mid"></div>
            <div class="sq" id="top-right"></div>
            <div class="sq" id="mid-left"></div>
            <div class="sq" id="mid-mid"></div>
            <div class="sq" id="mid-right"></div>
            <div class="sq" id="bot-left"></div>
            <div class="sq" id="bot-mid"></div>
            <div class="sq" id="bot-right"></div>
    </div>
</center>
</body>
</html>

相关内容

最新更新

热门标签：