css jquery 追加后缺少边距

Question

我已经使用jQuery的.append()函数创建了一组div，其中包含一些<input />和<span>，但是在我创建div之后，它缺少<input>标签之间的边距，如下图：

带边距的图像：

没有边距的图像（jquery创建）：

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>

jquery代码：

$('#good_sku_add').click(function(){
    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>';

    $(this).parent().after(html);
    $(this).parent().parent().trigger('create');
  })

我在 Whosebug 和 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

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

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

jsFiddle example

css jquery 追加后缺少边距

css missing margin after jquery append

jquery

append