Bootstrap, inline inputs have smaller gap when added dynamically

Question

In a modal: For some reason When I dynamically add a li with two input fields using jquery append the spacing of the first li (which was already there) has a bigger gap in between the two inputs then the rest that are added dynamically.
After checking the developer tools in Chrome, I see that they all have the same padding, margins and borders. From a CSS point of view I can't see a reason why there would be a larger gap in the first one.

<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>

in a backbone view I do this:

addGroupInModal: function(e){
        e.preventDefault();
        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>');
    },

Here is some CSS:

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

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

Answer 1

原因是空格，在2个输入之间添加1个空格的文本节点，或者不缩进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>');

Answer 2

As Antti says, the problem is that the whitespace between the input elements is being rendered. But if you want to keep the HTML a little more readable, you can also solve this with CSS by just floating the inputs:

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

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

And then add Bootstrap's clearfix class to the li elements for good measure.

Another way to solve it would be setting font-size on the parent elements (the li s) to 0. But I prefer floating the inputs.

http://jsfiddle.net/MY7zY/7/