Javascript 自举、内联输入在动态添加时具有较小的间隙

在模态中： 出于某种原因，当我使用

jquery append

动态添加带有两个输入字段的li时，第一个

li

的间距（已经存在）在两个

输入之间的间距比动态添加的其余输入的间距大。


在检查了Chrome中的开发者工具之后，我发现它们都有相同的填充、边距和边框。从CSS的角度来看，我看不出为什么第一个会有更大的差距

<div class="modal-body">
<ul id="add-groups-list">
    <li class="add-group-item">
        <input type="text" placeholder="Group Name" />
        <input type="text" placeholder="Spots Available" />
    </li>
</ul>
<p><a href="#" id="add-group-in-modal" class="btn btn-small">+</a></p>
</div>


原因是空格，在两个输入之间添加一个文本节点，其中有一个空格，或者不要缩进HTML代码

this.$el.find("#add-groups-list").append('<li class="add-group-item"><input type="text" placeholder="Group Name" /> <input type="text" placeholder="Spots Available" /></li>');

this.$el.find（#添加组列表”）.append（“
”）；
正如Antti所说，问题在于
输入
元素之间的空白正在被呈现。但如果您想让HTML更具可读性，也可以通过CSS浮动输入来解决这一问题：

#add-groups-list {
  list-style: none;
}

.add-group-item input {
  float: left;
  margin-left: 5px;
}

然后将Bootstrap的
clearfix
类添加到
li
元素中，以便更好地度量

另一种解决方法是将父元素（li

s）上的

font size

设置为0。但我更喜欢浮动输入

---

我最后要做的是将单个列表项转换为模板。所以我不必用HTML重复我自己的话，所以我也不会出现空白问题。因为我用的是主干。

this.$el.find("#add-groups-list").append('<li class="add-group-item"><input type="text" placeholder="Group Name" /> <input type="text" placeholder="Spots Available" /></li>');

#add-groups-list {
  list-style: none;
}

.add-group-item input {
  float: left;
  margin-left: 5px;
}