每个 <li> 的多余间距答案

【问题标题】：Unwanted Added Spacing to Each <li>每个 <li> 的多余间距
【发布时间】：2017-11-28 05:15:14
【问题描述】：

我已经找到了这个问题，但我看不到它。此代码空间中的某处被添加到每个列表项中。我认为它在 for 循环中，因为它每次都添加相同数量的空间。

代码如下：

    $(function(){
  $.get('/frameworks', appendToList);

  //POST request
  $('form').on('submit', function(event) {
    event.preventDefault();
    var form = $(this);
    var frameworkData = form.serialize();

    $.ajax({
      type: 'POST',
      url: '/frameworks',
      data: frameworkData
    }).done(function(frameworkName) {
      frameworkName = frameworkName[0].toUpperCase() + frameworkName.slice(1).toLowerCase();
      appendToList([frameworkName]);
      form.trigger('reset');
    });
  });

  //Del event

  function appendToList(frameworks) {
    var list = [];
    for(var i in frameworks) {
      framework = frameworks[i];
      content = '<a href="/frameworks/' +framework+'">' +framework+ '</a>' + '<a href="#" data-framework="' +framework+ '"><img src="del.png"></a>';
      list.push($('<li>', { html: content }));
    }
    $('.frameworks-list').append(list);
    console.log(list);
  }

});

我错过了什么？

这是生成的 HTML：

<ul class="frameworks-list">
  <li>
    <a href="/frameworks/React">React</a>
    <a href="#" data-framework="React"><img src="del.png"></a>
  </li>
  <li>
    <a href="/frameworks/Express">Express</a>
    <a href="#" data-framework="Express"><img src="del.png"></a>
  </li>
  <li>
    <a href="/frameworks/Angular">Angular</a>
    <a href="#" data-framework="Angular"><img src="del.png"></a>
  </li>
</ul>

所以看起来 li 正在关闭。我尝试添加这一行：

list.push($('<li>', { html: content }), '</li>'); //--------THIS LINE----------

但是没有用。

我只记得当我像这样取出图像时：

content = '<a href="/frameworks/' +framework+'">' +framework+ '</a>' + '<a href="#" data-framework="' +framework+ '"><span>X</span></a>';

我明白了：

所以图片有问题。

【问题讨论】：

你能显示生成的 html 标记吗？

标签： jquery css express for-loop

【解决方案1】：

@anivdwerf 关于这是一个 CSS 问题是正确的，但我想给出一个深入的答案。由于某种原因将其浮动到左侧导致它添加了额外的间距。我仍然不确定为什么，但我只是在 JavaScript 代码中将图像添加到左侧，如下所示：

  content = '<a href="#" data-framework="' +framework+ '"><img src="del.png"></a>' + '<a href="/frameworks/' +framework+'">' +framework+ '</a>';

这让我得到了想要的结果。

【讨论】：

【解决方案2】：

您似乎没有在此处关闭<li：

list.push($('<li>', { html: content }));

【讨论】：

我认为这是有原因的。我将查看 jQuery 的文档，看看我是否遗漏了什么。

【解决方案3】：

你错过了结束</li>。

某些浏览器（例如 Google Chrome）会解释此代码：

<li>Hi1
<li>Hi1
<li>Hi1

作为：

<li>Hi1
 <li>Hi1
    <li>Hi1</li>
  </li>
</li>

您需要将代码更改为：

$(function(){
  $.get('/frameworks', appendToList);

  //POST request
  $('form').on('submit', function(event) {
    event.preventDefault();
    var form = $(this);
    var frameworkData = form.serialize();

    $.ajax({
      type: 'POST',
      url: '/frameworks',
      data: frameworkData
    }).done(function(frameworkName) {
      frameworkName = frameworkName[0].toUpperCase() + frameworkName.slice(1).toLowerCase();
      appendToList([frameworkName]);
      form.trigger('reset');
    });
  });

  //Del event

  function appendToList(frameworks) {
    var list = [];
    for(var i in frameworks) {
      framework = frameworks[i];
      content = '<a href="/frameworks/' +framework+'">' +framework+ '</a>' + '<a href="#" data-framework="' +framework+ '"><img src="del.png"></a>';
      list.push($('<li>', { html: content }), '</li>'); //--------THIS LINE----------
    }
    $('.frameworks-list').append(list);
    console.log(list);
  }

});

【讨论】：

我试过了，但是没有用。我要查看 jQuery 的文档。谢谢！

【解决方案4】：

这可能太明显了，但是您是否尝试过使用 css 更改填充和/或边距？

【讨论】：

我是这么想的，但是 Chrome 开发者工具中没有显示多余的填充。