JQuery UI，其图标位于超链接的右侧

我试图在超链接的右侧放置一个图标（使用JQuery UI主题）。然而，我得到的最令人满意的结果是在页面的最右侧有一个图标，而不是紧跟在实际文本之后。最简单的选择是在文本后面有一个

标记，但图标需要使用当前主题进行样式设置

这就是我所拥有的：

....
<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>

。。。。
...
$（函数（）{
$（“#合同链接”）
.append（$（''）
.addClass（'ui-icon-ui-icon-newwin'）
.css（{'float'：'right'，'border'：'1px solid blue'}）
);
});

将div附加到锚定标记不是语义HTML。新元素（在本例中，div可能会更改为

span

）出现在页面右侧的原因是，您的锚标记上可能没有css

width

属性。如果设置该值，新的跨度将显示在锚点的最右侧边界。

我修改了代码，将div的css更改为display:inline，它实现了您想要的效果：

.css({'display':'inline', 'border':'1px solid blue'}));

---

您可以使图标

显示：内联块

或

显示：内联

。不确定在某些浏览器中，图标会受到什么影响，尽管它会将图标与跨度放在同一行上。由于jqueryui css使其显示为

display:block

，因此这可能是不可取的

或者，您可以使span

浮动：left

---

以上两种方法都有效，在这两种情况下，您都应该删除图标div上的

浮动：右

。

您不必使用

浮动：右

，因为图标

是附加的。你是想实现什么，还是我完全错了？是的，但是锚内的跨度是w3c有效的。div不是。这只是一个旁注——实际上并不影响结果和

清除

CSS指令，但它现在可以工作了。谢谢你的建议