我正在构建一个井字游戏，我用 CSS 绘制的棋盘在我插入的“X”上不断移动，就好像“X”具有边距属性一样。我已将所有边距和填充设置为 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>关于css - 不能将边距和填充设置为 0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38819774/