jQuery之前添加元素行为奇怪

Question

请转到jsfiddle：here。 点击带有“+”号的最后一张图片，这将打开一个带有ADD按钮的弹出窗口，请点击它。

问题是，我无法弄明白，为什么如果我添加多个元素（多次点击ADD，如4-5次），新元素之间的距离小于距离预定义元素之间？我使用相同的CSS，相同的HTML结构。

Answer 1

原因是<li>标签具有自然间距。

您有几个选择：

• 停止使用li标签并使用其他内容。
每行的
• <li>标记，应该是这样。
• 更改自然<li>行为

li { display: table; }

修改 弗洛林提到的另一个选择是：

a {
  float: left
}

无论如何，这都与li行为有关。有很多方法可以解决它。

Answer 2

您对图像使用内联块。
图像是使用display: inline-block进行布局的 在HTML代码中，图像之间有空格。该空白显示在网站上 插入的以编程方式添加的图像之间没有空格，因此它们更接近。

点击此处查看针对空白的策略： https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

我发现如果我添加一个标签：

a { 
    float:left;
}

它将删除不需要的空格。