防止网格上出现双边框

Question

我正在使用实现填字游戏css grid

空白单元格没有颜色。其他单元格有黑色边框。

问题在于边界正在相互冲突。

我已经打开了这个问题和这个问题。但这里的问题是并非所有单元格都有这种双重边框。

这是代码

.crossword-board-container {

  position: relative;

  background: #fff;

}

.crossword-board {

  background: transparent;

  display: grid;

  grid-template: repeat(5, 4em) / repeat(5, 4em);

  list-style-type: none;

  padding: 0;

  margin: 0 auto;

}

.crossword-board__item {

  border: 1px solid #000;

  background: transparent;

  text-align: center;

  font-size: 20px;

  font-weight: bold;

  text-transform: uppercase;

}

<div class="crossword-board-container">

  <div class="crossword-board">

    <!-- ROW 1 -->

    <span></span>

    <span></span>

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" /> <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <span></span>

    <span></span>

    <span></span>

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <span></span>

  </div>

</div>

Answer 1

您可以将所有输入顶部和左侧移动 1px，这将使边框相互折叠。然后向容器添加 1px 的内边距。这将是结果。.crossword-board-container {&nbsp; position: relative;&nbsp; background: #fff;}.crossword-board {&nbsp; background: transparent;&nbsp; display: grid;&nbsp; grid-template: repeat(5, 4em) / repeat(5, 4em);&nbsp; list-style-type: none;&nbsp; padding: 1px;&nbsp; margin: 0 auto;}.crossword-board input {&nbsp; margin: -1px 0 0 -1px;&nbsp; border: 1px solid red;&nbsp; background: transparent;&nbsp; text-align: center;&nbsp; font-size: 20px;&nbsp; font-weight: bold;&nbsp; text-transform: uppercase;}<div class="crossword-board-container">&nbsp; <div class="crossword-board">&nbsp; &nbsp; <!-- ROW 1 -->&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" /> <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />&nbsp; &nbsp; <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />&nbsp; &nbsp; <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />&nbsp; &nbsp; <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />&nbsp; &nbsp; <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <span></span>&nbsp; &nbsp; <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />&nbsp; &nbsp; <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />&nbsp; &nbsp; <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />&nbsp; &nbsp; <span></span>&nbsp; </div></div>