JQuery prependTo() 在 div 之间创建额外的空间

Question

问题

我正在尝试将 clone() div 添加到现有的 div 集，但遇到了一个奇怪的问题。 Div 似乎在 div 之间创造了额外的空间。重新格式化 html 可能是一种黑客攻击，但我真的不想这样做。

这是代码:

HTML

<div class="resources">
    <div class="template">
        <p>Hi <b>Bob</b></p>
    </div>
</div>

<div class="content">
    <div class="template">
        <p>Hi <b>Bob</b></p>
    </div><div class="template">
        <p>Hi <b>Mark</b></p>
    </div>
</div>

<button>Add Another Box</div>

CSS

.resources {
    display:none;
}

.template {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:blue;
    margin:1px;
}

.content {background-color:red}

JQuery

$('button').on('click',function(){
    $('.resources .template').clone()
        .find('b').html("joe").end()
        .prependTo(".content");
});

---

JSFiddle - http://jsfiddle.net/7Kmex/1/

Answer 1

这是 inline-block 元素的常见问题。如果元素之间有空格，则在元素之间显示一个空格。

一个常见的修复方法是将容器的 font-size 设置为 0。这样，空间就不会占用空间了:

.template {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:blue;
    margin:1px;

    font-size: 8pt;
}

.content {
    background-color:red; 
    font-size: 0;
}

http://jsfiddle.net/7Kmex/5/

或者，在这种特定情况下，您可以简单地删除第一个 div 标签之前的空格:

<div class="content"><div class="template">
        <p>Hi <b>Bob</b></p>
    </div>

http://jsfiddle.net/7Kmex/6/