附加链接未正确应用样式答案

【问题标题】：Append a link doesn't apply the style correctly附加链接未正确应用样式
【发布时间】：2015-06-30 17:46:57
【问题描述】：

这是我关于 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 上都看到了这个问题。

希望我说得够清楚，你会为我解答；）

提前致谢！

【问题讨论】：

【解决方案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);
});

【讨论】：