Question

我正在尝试构建一个tic tac toe游戏。现在，在设计电路板时，我在3行中制作了3个正方形，并在正方形上显示了内嵌块。为了方便起见，我在设计时将X放在正方形中，它完美无缺。但是现在当我放一个X时，即当玩家点击一个特定的方格时，方块会被推下来。Codepen Link。

.sq {
  display: inline-block;
  height: 90px;
  width: 120px;
  margin-right: -3px;
  text-align: center;
  font-size: 40px;
  padding-top: 30px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.3s;
}

<div class="row">
  <div class="sq 1 bottom right">X</div>
  <div class="sq 2 bottom right"></div>
  <div class="sq 3 bottom "></div>
</div>
<div class="row">
  <div class="sq 4 bottom right"></div>
  <div class="sq 5 bottom right"></div>
  <div class="sq 6 bottom"></div>
</div>
<div class="row">
  <div class="sq 7 right"></div>
  <div class="sq 8 right"></div>
  <div class="sq 9"></div>
</div>
</div>

Answer 1

将其添加到.sq https://codepen.io/anon/pen/gvXNqY?editors=1100

vertical-align: top;

垂直对齐的默认值是基线，所以当你在一个方框中有一个X而另一个方框中没有另一个时，方框的基线是不同的，如果你将它们对齐到顶部，它将正确显示

.sq{
  display:inline-block;
  vertical-align: top; // new
  height:90px;
  width:120px;
  margin-right:-3px;
  text-align:center;
  font-size:40px;
  padding-top:30px;
  cursor:pointer;
  font-family:sans-serif;
  transition:background 0.3s;
}

Answer 2

将您的风格改为：

Crowdsale

CSS布局Tic Tac Toe

2 个答案: