在下拉菜單的右側放置背景圖片

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/