元素之間缺乏間隔的動態添加問題

Question

我在我的標記中有以下模板。

然後我像這樣將它插入到我的DOM。 //在指定的目標之前

P粉384244473 · Answer

使用 flexbox 來折疊所有的空白，並添加間隙。

#btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}

function addSequenced(railcar, $target) {
    var $clone = $($('#unsequenced-template').html());
    $clone.attr('data-id', railcar.id);
    $clone.text(railcar.number);
    $clone.insertBefore($target);
    modified = true;
}

let num = 4;
$("#add-btn").on("click", function(e) {
  addSequenced({
    id: num,
    number: num,
  }, $(this));
  num++;
});

#btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}