Question

这是关于SO的第一个问题，希望我能够搜索到足够的帖子！这是我的第一个完全编码的项目，我可能不知道一切。

我试图用Jquery将样式链接附加到html中。附加动作比较差，但似乎附加的链接没有正确设置样式：边距不是我的css中指定的边距。使用相同样式手动创建的链接是可以的，边距很好。

我打赌代码和结果比单词更好，所以这是我的项目

HTML

<div class='container'>
  <a class='link'>content</a>
  <a class='link'>content</a>
  <a class='link'>content</a>
  ...
</div>

CSS

.link{
  display: inline-block;
  width: 18%;
  height: 150px;
  margin: 0.4vw;}

Jquery的

$('button').on( "click", function() {
   var link = "<a class='link'>Added link</a>";
   $( ".container" ).append(link);
});

基本上，您可以通过点击右上角的+按钮几次来查看问题。初始链接间隔很好，但Jquery添加的链接只有更薄的边缘。我试图改变边距的单位，或者去固定宽度（不理想，响应式设计）我在Firefox，Chrome和IE上看到了这个问题。

希望我足够清楚，你会得到我的答案;）

提前致谢！

Answer 1

由于链接显示为inline-block，原始html代码中有空格。所以原始链接中有额外的空间。当jquery添加链接时，每个链接之间没有空白区域，这就是为什么你们看到它们更加紧密。

修复

我建议你更新原来的html，以便链接之间没有空格，如此

<a class="link" id="fb">
    <h3>Link 1</h3>
</a><a class="link">
    <h3>Link 2
</h3></a>

或

<a class="link" id="fb"><h3>Link 1
</h3></a><!--

--><a class="link"><h3>Link 2
</h3></a>

现在调整你的边距以使它们适合，这将解决你的问题

使用jquery修复

要在jquery中添加空间，这非常容易

$('button').on( "click", function() {
   var link = "<a class='link'>Added link</a> ";
   $( ".container" ).append(link);
});