Question

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

这就是我所拥有的：

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

Answer 1

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

或者，您可以制作范围float:left。

以上两项工作，在这两种情况下，您都应删除图标div上的float:right。

Answer 2

将div添加到锚标记不是语义HTML。新元素（在这种情况下，div应该更改为span）出现在页面右侧的原因是因为您的锚标签可能没有css width属性。如果设置了该值，则新的跨度将显示在锚点的最右边界。

Answer 3

我修改了你的代码以更改div的css以显示：inline并且它实现了你正在寻找的效果：

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

带有超链接右侧图标的JQuery UI

3 个答案: