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

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/

Answer 2

我认为这是因为您使用display:inline-block. 有时可能会在某个地方出现一个空字符，显示为您的额外空格。

我尝试了该站点http://css-tricks.com/fighting-the-space-between-inline-block-elements/的一些技术

要删除 inline-block 元素之间的空格，请尝试将元素的字体大小设置.content为font-size: 0px

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

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

在这里我更新了你的小提琴http://jsfiddle.net/7Kmex/8/

Answer 3

您需要.template像这样删除第一个之前的空格，因为在添加第一个附加inline-block元素后 html 中的空格仍然存在，并且inline-blocks 之间的空格被浏览器渲染为 4px。

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

更新了 jsfiddle