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

Question

所以我在这里有一些jQuery：http://jsfiddle.net/8VtZf/

这是它看起来的开始...有（1）和（2），当我点击添加按钮时，它将克隆最后一个，并增加数字。这一切都运行正常，信息以：

开头

<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）之间的继承间隔将在添加的克隆之间丢失。添加这个额外间距的最佳方法是什么？

Answer 1

您可以使用的技巧是将父元素的字体大小设置为0.这是因为奇数间距是由后续input元素之间缺少空格字符引起的。

.inputClones {
    font-size: 0;
}

Here's a working fiddle for the above

如果要在按钮之间自定义间距，只需在inputButtons中添加margin-right。

.inputButton {
    margin-right: 8px;
}

Working fiddle with custom button spacing

如果你想留下实际的空间角色，我认为你运气不好。

Answer 2

在css中添加常量边距，如

的CSS：

.inputButton  {  
margin-right:1%
}

HTML：

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

jquery没有任何修改 DEMO

Answer 3

依靠浏览器来设置样式和布局元素是一个坏主意。为按钮定义一些CSS会更好：

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

jsFiddle Demo