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

【问题标题】：How to position the arrow of this widget correctly?如何正确定位此小部件的箭头？
【发布时间】：2011-02-23 14:49:45
【问题描述】：

小部件标题的 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>

我的 CSS 代码是

.widget-header span { float: left; }
.widget-header a, img { float: right; }

如果是这样，widgets_more 右箭头将像这样定位到文本“更多”的左侧，

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

谢谢。

【问题讨论】：

标签： html css css-float

【解决方案1】：

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

这样的事情应该可以做到（未经测试但应该可以）：

CSS：

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

如果您希望链接显示在链接的左侧，请使用以下内容：

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

然后将类应用到您的链接：

<a class="widgets-more" href="sh/index.php?type=rec">more</a>

另外，向右浮动的元素 应该堆叠在向左浮动的元素上方。所以重新排列你的 HTML 看起来像这样：

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

【讨论】：

完整而优雅的答案，有很大帮助，但是您能否提供任何参考'浮动到右侧的元素应该堆叠在浮动到左侧的元素之上。 '
@Jichao：很高兴您发现答案很有帮助。我找不到专门解释为什么浮动到右侧的元素需要放置在其他元素之上/之前的文章（包括向左浮动的元素）但是，我确实偶然发现了 Smashing Magazine 上一篇关于浮动的有趣文章，如果你是有兴趣：smashingmagazine.com/2007/05/01/…