0

我正在尝试制作一个 tik-tak-toe 板。这是我拥有的代码的 JSFiddle。我想删除行之间的空白，使其看起来像一个实际的 tik-tak-toe 板。我该怎么做？谢谢您的帮助。

在 JSFiddle 中找到的代码如下：

#squares {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  align-items: center;
}

#topLeft {
  border-bottom: solid;
  border-width: 10px;
}

#topCenter {
  border-left: solid;
  border-right: solid;
  border-bottom: solid;
  border-width: 10px;
}

#topRight {
  border-bottom: solid;
  border-width: 10px;
}

#middleLeft {
  border-top: solid;
  border-bottom: solid;
  border-width: 10px;
}

#middleCenter {
  border: solid;
  border-width: 10px;
}

#middleRight {
  border-top: solid;
  border-bottom: solid;
  border-width: 10px;
}

#bottomLeft {
  border-top: solid;
  border-width: 10px;
}

#bottomCenter {
  border-left: solid;
  border-top: solid;
  border-right: solid;
  border-width: 10px;
}

#bottomRight {
  border-top: solid;
  border-width: 10px;
}

.square {
  padding: 100px;
  border-width: 10px;
}
<div id="squares">
  <p id="topLeft" class="square">sample</p>
  <p id="topCenter" class="square">sample</p>
  <p id="topRight" class="square">sample</p>
  <p id="middleLeft" class="square">sample</p>
  <p id="middleCenter" class="square">sample</p>
  <p id="middleRight" class="square">sample</p>
  <p id="bottomLeft" class="square">sample</p>
  <p id="bottomCenter" class="square">sample</p>
  <p id="bottomRight" class="square">sample</p>
</div>

4

3 回答 3

0

添加margin: 0;到您的.square风格。

#squares {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  align-items: center;
}

#topLeft {
/*  border-bottom: solid; */
  border-width: 10px;
}

#topCenter {
  border-left: solid;
  border-right: solid;
/*  border-bottom: solid; */
  border-width: 10px;
}

#topRight {
/*  border-bottom: solid; */
  border-width: 10px;
}

#middleLeft {
  border-top: solid;
/*  border-bottom: solid; */
  border-width: 10px;
}

#middleCenter {
  border: solid;
  border-bottom: 0; /* added */
  border-width: 10px;
}

#middleRight {
  border-top: solid;
/*  border-bottom: solid; */
  border-width: 10px;
}

#bottomLeft {
  border-top: solid;
  border-width: 10px;
}

#bottomCenter {
  border-left: solid;
  border-top: solid;
  border-right: solid;
  border-width: 10px;
}

#bottomRight {
  border-top: solid;
  border-width: 10px;
}

.square {
  padding: 100px;
  border-width: 10px;
  margin: 0;
}
<div id="squares">
  <p id="topLeft" class="square">sample</p>
  <p id="topCenter" class="square">sample</p>
  <p id="topRight" class="square">sample</p>
  <p id="middleLeft" class="square">sample</p>
  <p id="middleCenter" class="square">sample</p>
  <p id="middleRight" class="square">sample</p>
  <p id="bottomLeft" class="square">sample</p>
  <p id="bottomCenter" class="square">sample</p>
  <p id="bottomRight" class="square">sample</p>
</div>

于 2021-08-08T01:06:30.463 回答
0

您只需要像下面的代码一样重置浏览器的默认样式，例如（margin, padding, box-sizing, ...） ：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

在这种情况下，只需将margin 属性重置为 0就足够了，但对其他属性也这样做总是好的。

于 2021-08-08T01:08:28.117 回答
0

每个正方形都是它自己的元素，除非您专门制作它们，否则它们不会重叠。尝试使用绝对定位将每个方块准确定位在您想要的位置，这里有一个网站解释了如何做到这一点。这将覆盖边界和下一行之间的自然空间。

于 2021-08-08T01:10:59.117 回答