jquery追加后css缺少保证金

Question

我已经使用jQuery的.append()函数来创建一组包含<input />和<span>的div，但在创建div之后，它忽略了{{1}之间的边距} tag，如下图所示：

带边距的图片：

没有边距的图像（jquery create）：

html代码：

<input>

jquery代码：

<div class="controls">
    <input type="text" class="span3" name="name" placeholder="规格名称" />
    <input type="text" class="span3" name="name" placeholder="商品价格" />
    <input type="text" class="span3" name="name" placeholder="商品原价" />
    <input type="text" class="span2" name="name" placeholder="商品库存" />
    &nbsp;&nbsp;&nbsp;
    <span id="good_sku_add" class="icon-plus"></span>
</div>

我在stackoverflow和google上搜索一些文档，但是它无法工作，有人能给我一些想法吗？

Answer 1

您在动态创建的版本中的<input />标记之间缺少空格。

例如，试试这个：

html = '';
html += '<div class="controls"> ';
html += '<input type="text" class="span3" name="name" placeholder="规格名称" /> ';
html += '<input type="text" class="span3" name="name" placeholder="商品价格" /> ';
html += '<input type="text" class="span3" name="name" placeholder="商品原价" /> ';
html += '<input type="text" class="span2" name="name" placeholder="商品库存" /> ';
html += '&nbsp;&nbsp;&nbsp;';
html += '<span id="good_sku_add" class="icon-plus"></span>';
html += '</div>';

说明：

在HTML版本中，<intput />标记之前的前导空格（缩进）在渲染时会折叠为单个空白字符。在HTML版本中，由于字符串连接方法，标签之间根本没有空格。

（主观）清洁方法可能是尝试这个：

var html = [
    '<div class="controls">',
    '<input type="text" class="span3" name="name" placeholder="规格名称" />',
    '<input type="text" class="span3" name="name" placeholder="商品价格" />',
    '<input type="text" class="span3" name="name" placeholder="商品原价" />',
    '<input type="text" class="span2" name="name" placeholder="商品库存" />',
    '&nbsp;&nbsp;&nbsp;',
    '<span id="good_sku_add" class="icon-plus"></span>',
    '</div>'
].join(' ');

Answer 2

这不是缺少的边距，缺少的只是输入之间的空格（内联元素对空白区域敏感）。只需在输入代码的每一行末尾添加一个：

html += '<input type="text" class="span3" name="name" placeholder="规格名称" /> ';
                                                                              ^

<强> jsFiddle example