CSS格式化图像w / jquery ui自动完成小部件中的文本

Question

我有一个自动完成小部件，可显示带图像的文本。目前我的结果看起来像这样。

我想设置我的结果，以便“测试”字样。和名字＆＃39; Federico＆＃39;或者＆＃39;凯西＆＃39;出现在不同的行上，正好在彼此之上。

这是我的小部件javascript代码的相关部分：

)
.data( "autocomplete" )
._renderItem = function( ul, item ) {
    return jQuery( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top;'/>" + item.id + " - " + item.label + "</a>" )
        .appendTo( ul );
};

任何人都知道如何格式化我的输出来实现这一目标？谢谢！

Answer 1

.append( "<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top; float: left;'/>" + item.id + " <br /> " + item.label + "</a>" )

试试这个..

Answer 2

将a标签的文本部分包装在div元素中，该元素应创建您正在寻找的推送，并允许<br />以您希望的方式工作。符合CSS3但向后兼容。

.append( "<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top; float: left;'/><div>" + item.id + " <br /> " + item.label + "</div></a>" )