gpt4 book ai didi

javascript - 为什么当我单击其中一个框时该行向下移动?

转载 作者:行者123 更新时间:2023-11-28 02:51:34 25 4
gpt4 key购买 nike

这是我的代码 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;
}

最佳答案

this question 中所述.将 vertical-align: middle; 添加到您的 .col 类。 topbottomvertical-align 也可以工作,只要它应用于父容器。 W3 很好地解释了为什么这有效 here

关于javascript - 为什么当我单击其中一个框时该行向下移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46649713/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com