jquery - div上的jQuery clone（）奇怪地定位它

Question

我在正文中有一个空的 div，带有以下 CSS：

div{
    border: 1px solid black;
    width: 100px;
    height: 100px;
    display: inline-block;
}

然后我使用 jQuery 克隆元素几次。结果，为什么原来的占了额外的保证金？

score 4 · Accepted Answer

4

这就是问题所在display: inline-block。我通常用font-size: 0. http://jsfiddle.net/CcmFJ/2/

于 2013-04-11T22:14:18.987 回答

score 1 · Accepted Answer

就是display:inline-block这样做。有几种不同的方法可以解决这个问题，其中很多都在问题显示中涵盖：inline-block extra margin already。

我首选的方式是font-size:0在容器上设置。

score 1 · Accepted Answer

这实际上是由于该方法注入了空白.append()。你最终得到这个：

<body style="">
  <div></div>






<div></div>...

如果您.after()像这样使用并插入 div：

for (var i = 0; i < 20; i++){
    $("div:first").after($("div:first").clone());
}

在克隆之前你没有额外的空白。jsFiddle 示例

score 0 · Accepted Answer

有很多方法可以在inline-blocks

在以下链接下可以找到包含许多示例的最佳资源：
CSS-Tricks

没有操纵 css 的 HTML 示例将是（例如）：

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

或者：

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

4 回答 4