我已经有了我的tic tac toe游戏所需要的所有div,但是我似乎找不到一个更简单的方法来制作一个网格,并且没有任何边界,所以它只是一个网格而不是9个完整的正方形。我认为这是CSS中的一个问题。
<html>
<head>
<title>First Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<div class="wrapper">
<div class="gameboard">
<div class="Row1">
<div id="cell1"></div>
<div id="cell2"></div>
<div id="cell3"></div>
</div>
<div class="Row2">
<div id="cell4"></div>
<div id="cell5"></div>
<div id="cell6"></div>
</div>
<div class="Row3">
<div id="cell7"></div>
<div id="cell8"></div>
<div id="cell9"></div>
</div>
</div>
<div class="button">
<button>New Game</button>
<button>End Game</button>
</div>
</div>
</body>
</html>
这是CSS,我有9个方框,我需要一个网格,我该怎么做?
.gameboard {
width: 330px;
height:310px;
border:3px solid white;
z-index: 1;
}
.wrapper {
width: 330px;
margin:0 auto;
}
.button {
background-color:white;
width: 160px;
margin:0 auto;
}
.row1, .row2, .row3 {
clear:both;
}
#cell1,#cell2,#cell3 {
width:100px;
height:100px;
border:3px solid black;
float: left;
}
#cell4,#cell5,#cell6 {
width:100px;
height:100px;
float: left;
border:3px solid black;
}
#cell7,#cell8,#cell9 {
width:100px;
height:100px;
float: left;
border:3px solid black;
}
发布于 2014-01-09 17:58:39
通过编写一个3×3的HTML表格并在CSS中设置其单元格的尺寸,您可以在HTML和CSS中创建一个3×3的网格。对于tic tac toe网格不使用表格是荒谬的,如果有的话,这是一个表格结构。
<style>
td { width: 1em; height: 1em; line-height: 1 }
</style>
<table>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
</table>
这里通常不需要id
属性,因为您可以在CSS和JavaScript中根据单元格的结构位置来引用它们,除非您需要支持旧浏览器。
具体细节取决于详细的需求。现在问题是“没有任何边框”,但是CSS代码清楚地设置了边框。
https://stackoverflow.com/questions/21014209
复制相似问题