追加 link 未正确应用样式

Question

这是我关于 SO 的第一个问题，希望我搜索得够多 post！这是我第一个完全编码的项目，我可能不是什么都懂。

我正在尝试使用 Jquery 将样式化的 link 附加到 html 中。追加动作有效，但似乎追加的 link 样式不正确：边距不是我的 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);
});

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

希望我说得足够清楚，您会为我找到答案；）

提前致谢！

Answer 1

由于 link 显示 inline-block 并且原 html 代码中有白色 space。所以在原来的 link 中有那个额外的 space 。当 jquery 添加 link 时，每个 link 之间没有白色 space，这就是为什么你会看到它们靠得更近。

修复

我建议您更新原始 html，使 link 之间没有 space，就像这样

<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中添加space非常简单

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

Append a link doesn't apply the style correctly