html - 如何使用 CSS 在 div 中制作网格输入框 nxn？

Question

我想放置N个输入框来创建一个NxN的输入区域正方形。我尝试使用 <br>每放置 N 个方格后。但这不是我想要的结果。因为正方形之间有空格，这是我不想要的。同时使用 <br>我认为这不是一个好方法。有没有其他方法可以成功制作这个东西？

创建 3x3 正方形的代码:

 .box {
   margin-right: 0px;
   width: 30px;
   height: 30px;
   box-sizing: border-box;
 }

<div>
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <br>
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <br>
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
</div>

Answer 1

您可以在 div 上设置 width 并删除 white-space 的

div {
  width: 90px;
}
.box {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
}

<div>
  <input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text">
</div>

你也可以使用Flexbox

div {
  display: flex;
  flex-wrap: wrap;
  width: 90px;
}
.box {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
}

<div>
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
</div>