小部件标题的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代码获得正确的顺序?

谢谢。

最佳答案

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

这样的事情应该可以做到(未经测试但应该可以):

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>

关于html - 如何正确定位此小部件的箭头?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5087445/

10-09 19:06
查看更多