输入之间的BR标签不会导致换行

Question

我有一排输入（来自类型button），我想在每3个输入之间创建一个行距。 所以我做这个：

for(var i = 1; i <= 9; i++) {
  if(i%3 == 0) $('#input' + i).before('<br>');
}

按钮保持在其位置。图片：

有想法吗？

编辑：

问题出在CSS中，我将主div的display设置为inline-grid。感谢所有尝试帮助的人。

Answer 1

在<br>之后而不是button之前添加

。

for (var i = 1; i <= 9; i++) {
  if (i % 3 == 0)
    $('#input' + i).after('<br>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="input1">a</button>
<button id="input2">b</button>
<button id="input3">c</button>
<button id="input4">d</button>
<button id="input5">e</button>
<button id="input6">f</button>
<button id="input7">g</button>
<button id="input8">h</button>
<button id="input9">i</button>

Answer 2

我想将CSS Grid纳入其中，因为... 2019年。

COPY src/.env /app/.env

.container {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
}

jsFiddle