<分区>
<分区>
设计目标只是将所有 div.tile 完美地放入 div#gameField 中。我的 jQuery 工作正常，但我得到了这个 CSS 困惑。请告诉我不需要的空间、边距或填充来自哪里，因为我不知道。我不认为这是原因，但我使用这个 normalize.css也是。
HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<div id="gameField">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
<!--jQuery-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
CSS3:
body {
background-color: black;
color: lightgrey;
text-align: center;
}
#gameField {
margin: 10px auto 10px auto;
width: 300px;
height: 300px;
background-color: white;
border: 5px solid darkgrey;
border-radius: 10px;
padding: 0 0 0 0;
}
#gameField .tile {
width: 100px;
height: 100px;
border: 1px solid lightgrey;
background-color: white;
display: inline-block;
border-radius: 10px;
}
最佳答案
我认为您需要将宽度从 302 像素增加到 300 像素，因为边框会占用空间。现在你的边界是 1px 因此它在里面占用空间。希望它能解决您的问题。
关于html - 需要有关 3x3 井字游戏设计的帮助。我无法摆脱 CSS 中的一些空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31635143/