小部件标题的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 右箭头将像这样定位到文本“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/