Html 如何正确定位此小部件的箭头？

小部件头的html代码如下所示

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

如果是这样的话，右箭头会像这样定位在文本“more”的左边，

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

如何通过修改css代码获得正确的顺序

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

---

谢谢。

不要将箭头作为图像放置在链接旁边，而应将其设置为类中的背景图像

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

像这样的东西应该在未经测试的情况下完成，但应该可以工作：

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

CSS:

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

如果希望链接显示在链接的左侧，请使用以下命令：

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

a.widgets-more{
    background-image:url(/img/widgets/widgets_more.gif);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:10px;
}

然后将该类应用于您的链接：

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

此外，向右浮动的图元应堆叠在向左浮动的图元上方。因此，请重新排列您的HTML，如下所示：

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

<div class="widget-header">
    <a class="widgets-more" href="sh/index.php?type=rec">more</a>
    <span>caption</span>
</div>

---

完整而优雅的回答，很有帮助，但是你能提到“浮动到右边的元素应该堆叠在浮动到左边的元素之上”吗@季超：很高兴你发现这个答案很有用。我找不到一篇文章专门解释为什么浮动到右侧的元素需要放在其他元素（包括浮动到左侧的元素）的上方/之前。但是，我偶然发现了一篇关于Smashing杂志的有趣文章，关于浮动，如果您感兴趣：