CSS布局井字游戏[重复]

Question

我正在尝试构建一个井字游戏。现在在设计电路板时，我在 3 行中制作了 3 个方块，并在这些方块上放置了一个 inline-block 显示。为方便起见，我在设计时将 Xs 放在了正方形中，它非常完美。但是现在当我放一个 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

改变你的风格：

.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;
    vertical-align: top;
}