我正在使用實(shí)現(xiàn)填字游戲css grid空白單元格沒有顏色。其他單元格有黑色邊框。問題在于邊界正在相互沖突。我已經(jīng)打開了這個(gè)問題和這個(gè)問題。但這里的問題是并非所有單元格都有這種雙重邊框。這是代碼.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>
1 回答
米琪卡哇伊
TA貢獻(xiàn)1998條經(jīng)驗(yàn) 獲得超6個(gè)贊
您可以將所有輸入頂部和左側(cè)移動 1px，這將使邊框相互折疊。
然后向容器添加 1px 的內(nèi)邊距。
這將是結(jié)果。
.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: 1px;
margin: 0 auto;
}
.crossword-board input {
margin: -1px 0 0 -1px;
border: 1px solid red;
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>
- 1 回答
- 0 關(guān)注
- 137 瀏覽
添加回答
舉報(bào)
0/150
提交
取消