今天，我正在开发一款名为 Tic Tac Toe 的游戏。 ，其中我使用了以下代码:
let init = () => {
const [...boxes] = document.getElementsByClassName('col');
let insert = (box, oper) => {
box.innerHTML = 'X';
};
boxes.forEach(box => {
box.addEventListener('click', event => {
insert(event.target, 1);
});
box.innerHTML = '';
});
};
window.onload = init();* {
box-sizing: border-box;
margin: 0;
}
.ctn {
height: 300px;
font-size: 0;
padding: 7vh 0;
}
.row {
position: relative;
left: 50vw;
transform: translate(-50%, 0);
width: 300px;
height: 100px;
box-shadow: 0 0 1px #000;
}
.col {
padding: 0;
font: 800 64pt normal;
width: 100px;
height: 100px;
display: inline-block;
box-shadow: 0 0 1px #000;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class='ctn'>
<div class='row'>
<p class='col'></p>
<p class='col'>D</p>
<p class='col'></p>
</div>
<div class='row'>
<p class='col'></p>
<p class='col'></p>
<p class='col'></p>
</div>
<div class='row'>
<p class='col'></p>
<p class='col'></p>
<p class='col'></p>
</div>
</div>
<script type="text/javascript" src='./script.js'></script>
</body>
</html>如您所见，我添加了 Event Listener每个盒子。但是，当我实际单击该框时，框会向下平移。此外，当我单击同一行的所有三个框时，它们实际上会平移到初始位置!
我做错了什么？
最佳答案
由于您使用的是 inline-block - 将 vertical-align: middle; 添加到 col:
let init = () => {
const [...boxes] = document.getElementsByClassName('col');
let insert = (box, oper) => {
box.innerHTML = 'X';
};
boxes.forEach(box => {
box.addEventListener('click', event => {
insert(event.target, 1);
});
box.innerHTML = '';
});
};
window.onload = init();* {
box-sizing: border-box;
margin: 0;
}
.ctn {
height: 300px;
font-size: 0;
padding: 7vh 0;
}
.row {
position: relative;
left: 50vw;
transform: translate(-50%, 0);
width: 300px;
height: 100px;
box-shadow: 0 0 1px #000;
}
.col {
padding: 0;
font: 800 64pt normal;
width: 100px;
height: 100px;
display: inline-block;
box-shadow: 0 0 1px #000;
text-align: center;
vertical-align: middle;
}<div class='ctn'>
<div class='row'>
<p class='col'></p>
<p class='col'>D</p>
<p class='col'></p>
</div>
<div class='row'>
<p class='col'></p>
<p class='col'></p>
<p class='col'></p>
</div>
<div class='row'>
<p class='col'></p>
<p class='col'></p>
<p class='col'></p>
</div>
</div>PS:我建议使用 flex 或 grid 来实现这种布局。
关于HTML 元素在向其添加内容时向下转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50628749/