Question

我试图用React创建一个基本的tic tac toe游戏（但这个问题只是关于CSS）。

最初，我为网格编写了以下代码：

App.js：

import React, { Component } from 'react';
import Square from './Square';

class App extends Component {
  render() {
    return (
      <div>
        <div><Square /><Square /><Square /></div>
        <div><Square /><Square /><Square /></div>
        <div><Square /><Square /><Square /></div>
      </div>
    )
  }
}

export default App;

其中每个Square只是一个空div（所以我在这里省略了Square.js代码），它具有以下样式：

{
  backgroundColor: "white",
  border: "black solid 2px",
  textAlign: "center",
  fontSize: "20px",
  width: "40px",
  height: "40px",
  margin: -1,
  display: "inline-block",
}

当渲染＆＃34; X＆＃34;，＆＃34; O＆＃34;时，广场上下跳跃的是什么？和空字符串一样：

然后我查阅了React的官方教程代码，他们以两种方式做了不同的修改：

在Square的CSS中，添加了＆＃34; float：left＆＃34;而不是我的＆＃34;显示：内联块＆＃34;
他们增加了另一个课程＆＃34; board-row＆＃34;对于每一行，即对于每一行包含3个Square的div，使用以下CSS：
```
.board-row:after{
      clear: both;
      content: "";
      display: block;
}
```
我的问题是：
为什么我的代码没有工作？
为什么新代码有效？

我确实有一些初步的想法：新代码将每行的正方形向左浮动，然后它创建一个空元素，使用＆＃34; clear：both＆＃34;，将空元素移动到浮动正方形下方，迫使下一排Squares走到下面。（没有＆＃34;清除：两个＆＃34;所有9个方格都在同一行）。＆＃34;显示：块＆＃34;也让空元素能够推动方块。

有意义吗？我也无法解释原始代码的问题。

通常情况下，只要代码已经有效，我就不会在乎，但是我试图教别人React，所以我希望能够向他们解释。

Answer 1

简单地添加

verticalAlign: "top",

根据此blog，

到初始样式就足够了。我尝试了你的初始风格并且它有效。你不必添加.board-row:after

Answer 2

为什么新代码有效？ 因为它使用浮动属性来获得所需的布局。您试图通过使用"display: inline-block"来实现相同的目标，并且调用了一个问题。我在这里找到了一个很好的解释：Why is this inline-block element pushed downward?

尽管如此，您的解决方案没有错，只需添加overflow: hidden和line-height等于字体大小即可使文本垂直居中。你也错过了保证金属性“px”

.square {
  background-color: white;
  border: black solid 2px;
  text-align: center;
  font-size: 20px;
  width: 40px;
  height: 40px;
  margin: -1px;
  display: inline-block;
  overflow: hidden;
  line-height: 40px;
}

https://codepen.io/Yulia_pi/pen/bMxxOo?editors=1100

Tic Tac Toe HTML CSS

2 个答案: