带有超链接右侧图标的JQuery UI [英] JQuery UI with icon on the right side of an hyperlink

问题描述

我正在尝试在超链接的右侧放置一个图标（使用JQuery UI主题）。然而，我得到的最满意的结果是页面最右侧的图标，而不是在实际文本之后。最简单的选择是在文本后面加上< IMG> 标记，但图标需要使用当前主题设置样式。

I'm trying to place an icon (using JQuery UI theme) on the right side of an hyperlink. However the best satisfactory result I had was an Icon on the far right side of the page, and not immediately after the actual text. The easiest option would be to have an <IMG> tag after the text, but the icon needs to be styled with the current theme.

这就是我所拥有的：

....
<a href="#" id="contractLink" target="_blank" class="left-margin">
    <span id="contractLinkText">Loading...</span>
</a>
...
<script type="text/javascript">
$(function() {
   $('#contractLink')
       .append($('<div></div>')
                  .addClass('ui-icon ui-icon-newwin')
                  .css({'float':'right', 'border':'1px solid blue'})
       );
});
</script>

推荐答案

你可以制作图标 display：inline-block 或 display：inline 。不确定在某些浏览器中对图标会产生什么影响，尽管它会将其与跨度放在同一行。由于jqueryui css使它 display：block ，也许这是不可取的。

You can make the icon display:inline-block or display:inline. Not sure what effect that will have on the icon in certain browsers, although it will put it on the same line as the span. Since the jqueryui css makes it display:block, maybe that isn't advisable.

或者，你可以制作span float：left 。

Alternatively, you can make the span float:left.

以上两种方法都有效，在这两种情况下你都应该删除<$图标div上的c $ c> float：right 。

Both of the above work, and in both cases you should remove the float:right on the icon div.

这篇关于带有超链接右侧图标的JQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！