0
這是我的代碼https://jsfiddle.net/wLyux9un/爲什麼此行在我單擊其中一個框時向下移動？
const PLAYER_TOKEN = 'X';
const COMPUTER_TOKEN = '0';
$(document).ready(function() {
const grid = [
[' ', ' ', ' '],
[' ', ' ', ' '],
[' ', ' ', ' ']
];
$('.col').click(function() {
$(this).html(PLAYER_TOKEN);
});
});body {
margin: 0px;
margin-top: 10px;
background-color: orange;
text-align: center;
}
.col {
display: inline-block;
width: 80px;
height: 70px;
text-align: center;
background-color: white;
margin-top: 2px;
font-size: 30px;
padding: 20px;
padding-top: 20px;
}
button {
padding: 10px;
font-size: 30px;
margin-top: 20px;
border-radius: 5px;
}<!DOCTYPE html>
<link type="text/css" rel="stylesheet" href="tictak.css">
<body>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div>
<button id="restart">Restart</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="tictak.js"></script>
</body>
</html>爲什麼當我點擊該行向下移動的箱子？
.col{
display:inline-block;
width:80px;
height:70px;
text-align:center;
background-color:white;
margin-top:2px;
font-size:30px;
padding:20px;
padding-top:20px;
}
作爲臨時解決方案，使用'