将背景图像放在下拉菜单的右侧

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

如果您的dropdown元素位于列表中，请尝试为这两个元素添加宽度。在这种情况下，我假设您的width: 100%;元素（列表项＆＃39;父元素）具有固定的宽度，因此添加li { width: 100%; } li a { display: block; width: 100; } 应该可以解决问题。例如：

a

{{1}}元素需要显示为块才能获得大小。

Answer 3

你可以尝试两件事

1. 在右侧添加填充，使图像移动一点。
2. 让您的链接显示：阻止;不确定它是否有效。如果图像不在流动中，不会。

Answer 4

将此添加到CSS中，使图标显示在文本后面。

sed 's/run_id = \([[:digit:]]\+\)/run_id between \1 and \1/g' <<END
some text run_id = 1234 some text
END

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

其他选项：

添加此项以使图标显示在选项

的最右端

some text run_id between 1234 and 1234 some text

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

Answer 5

将此添加到您的css

li a {
  display: block;
}

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