在下拉菜单的右侧放置背景图片

Question

我有一个下拉菜单。

我想我的图标移动到最右边。我试过

if (item.logo) { 
    result.find("a") 
     .addClass("ui-menu-item-icon") 
     .css("background-image", "url(" + item.logo + ")") 
     .css('background-repeat', 'no-repeat') 
     .css('background-position', 'top right') 
     .css('background-size', '28px 19px'); 
    } 

我似乎无法使它工作。

这里是我的

JSfiddle

任何提示？

Answer 1

添加到您的CSS

.ui-menu-item-icon { 
    display: block; 
} 

Answer 2

如果您的a元素在列表中，请尝试为它们添加宽度。在这种情况下，我假设你的dropdown元素（列表项的父元素）具有固定的宽度，所以添加一个width: 100%;应该有效。例如：

li { 
    width: 100%; 
} 

li a { 
    display: block; 
    width: 100; 
} 

的a元件需要被显示为块给予的尺寸。

Answer 3

有两件事情，你可以尝试

1. 在右侧添加填充使图像进一步移动了一点。
2. 显示链接：block;不知道它会起作用。如果图像不在流动，则不会。

Answer 4

添加到您的CSS，使图标文字之后出现。

a.ui-menu-item-icon { 
    padding-right: 30px; 
} 

https://jsfiddle.net/4sv3cpeu/2/

其他选项：

加入本作的图标出现在选项

a.ui-menu-item-icon { 
    display: block; 
} 

https://jsfiddle.net/4sv3cpeu/4/

Answer 5

广告的最右端d这对你的CSS

li a { 
    display: block; 
} 

演示：https://jsfiddle.net/s75o5xo6/