在jQuery中克隆时处理格式中空格的最佳方法？

因此，我在这里使用了一些jQuery：

这是一开始的样子。。。有（1）和（2），当我单击add按钮时，它将克隆最后一个，并增加数字。这一切工作正常，信息如下：

<div class="inputClones">
    <input class="inputButton" type="button" name="result[]" value="1" />
    <input class="inputButton" type="button" name="result[]" value="2" />
</div>

当我单击“克隆”按钮时，问题出现了。克隆将发生在元素上，但它不会保留格式。。。结果代码如下：

<div class="inputClones">
    <input class="inputButton" type="button" name="result[]" value="1" />
    <input class="inputButton" type="button" name="result[]" value="2" /><input class="inputButton" type="button" name="result[]" value="3" /><input class="inputButton" type="button" name="result[]" value="4" />
</div>

---

因此，（1）和（2）之间的固有间距将在添加的克隆之间丢失。添加此额外间距的最佳方法是什么？

可以使用的技巧是将父元素的字体大小设置为0。这是因为奇数间隔是由后续

输入

元素之间缺少空格字符造成的

.inputClones {
    font-size: 0;
}

如果要自定义按钮之间的间距，只需在inputButtons右侧添加边距即可

.inputButton {
    margin-right: 8px;
}

---

如果您希望保留实际的空格字符，那么我认为您运气不好。

在css中添加常量边距，如

css:

HTML:

jquery没有任何修改

---

依靠浏览器来设计和布局元素是个坏主意。您最好为按钮定义一些CSS：

.inputClones input[type="button"] {
    float: left;
    margin-right: 10px;
}
    .inputClones input[type="button"]:last-child {
        margin-right: 0;
    }

---

您应该使用CSS来实现这一点。不同的浏览器有不同的内置样式表。CSS不是解决方案。。。因为它在第一个元素中还有额外的空间。。。基本上右边的保证金变成右边的保证金：1%。。。加上额外的空间。它不是常量。使用我提供的html没有问题；）特别为你添加了演示，但是如果我想要空间怎么办？@JasonAxelrod然后检查我的答案。保证一致性的唯一方法。

<div class="inputClones">
    <input class="inputButton" type="button" name="result[]" value="1" /><input class="inputButton" type="button" name="result[]" value="2" />
</div>
<br />
<input type="button" value="Add Button" class="addButton">

.inputClones input[type="button"] {
    float: left;
    margin-right: 10px;
}
    .inputClones input[type="button"]:last-child {
        margin-right: 0;
    }