div 方形对齐问题中的 css div

Question

我正在尝试在 html 页面中创建一个 6 * 6 的正方形输入框。为了定位它们，我使用了 div 和 css:

<div class="boxes">
    <div class="box_0_0"><input... ></div>
    <div class="box_0_1"><input... ></div>
    <div class="box_0_2"><input... ></div>
    <div class="box_0_3"><input... ></div>
    ...
    <div class="box_1_0"><input... ></div>
    <div class="box_1_1"><input... ></div>
    ...
</div>

在哪里

.boxes { position: relative; }

.box_0_0 { position: relative; float: left; top: 0px; left: 0px; width: 40px; height: 50px; }
.box_0_1 { position: relative; float: left; top: 0px; left: 50px; width: 40px; height: 50px; }
...

.box_1_0 { position: relative; float: left; top: 60px; left: 0px; width: 40px; height: 50px; }
.box_1_1 { position: relative; float: left; top: 60px; left: 50px; width: 40px; height: 50px; }

但结果不是正方形对齐:

我怎样才能做到这一点？

Answer 1

取出 float: left 并在 box_0_0 上使用 position: absolute 而不是 position: relative 和休息。这行得通吗？