jquery autocomplete UI - 使用标签定位图像

Question

我试图在jquery自动完成小部件的结果中包含图像。

$("#search").autocomplete({
  source: data,
  minLength: 2,
  }).data("uiAutocomplete")._renderItem = function (ul, item) {
    return $("<li />")
      .data("item.autocomplete", item)
      .append("<a><span><img style=\"max-height: 50px;\" src='" + item.thumbnail + "' />" + item.label + "</span></a>")
      .appendTo(ul);
     }; 
  },

我的代码正在运行，但我似乎无法弄清楚如何在图像和文本之间创建空间。现在，我的结果如下：

正如您所看到的，图像与结果链接之间没有间距（如果仔细观察，您会看到＆＃34; Rue de la Bavole，Honfleur＆＃34的开头;盒子到最左边）。

是否有解决此问题的简单方法？

解决方案

我能够通过仅将文本放在<a>标签中来解决问题。这是代码

.append("<img style=\"max-height: 50px; margin-right: 5px;\" src='" + item.thumbnail + "'/>" + "<a>" + item.label + "</a>")

Answer 1

您可以尝试为图像的样式属性添加一些边距，例如：

改变这个：

.append("<a><span><img style=\"max-height: 50px;\" src='" + item...

到此：

.append("<a><span><img style=\"max-height: 50px; margin-right: 10px;\" src='" + item...