3

jquery append在模态中：由于某种原因，当我使用第一个li（已经存在）的间距动态添加带有两个输入字段的 li 时，两者之间的间隙比inputs动态添加的其余部分更大。
检查 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>

在主干视图中，我这样做：

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>');
    },

这是一些CSS：

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

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

2 回答 2

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>');
于 2013-08-18T13:05:42.787 回答
0

正如 Antti 所说，问题在于input元素之间的空白正在被渲染。但是如果你想让 HTML 更具可读性，你也可以通过浮动输入来使用 CSS 解决这个问题：

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

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

然后将 Bootstrap 的clearfix类添加到li元素中以进行良好的测量。

解决它的另一种方法是将font-size父元素（lis）设置为0。但我更喜欢浮动输入。

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

于 2013-08-18T13:29:07.350 回答