Question

这是我的代码：

<ul class="items">
    <li class="product1"><a href=""><span>Televisions</span></a></li>
    <li class="product2"><a href=""><span>Networked Computer Stoarge</span></a></li>
</ul><!--end items-->

如果你可以想象href是一个圆形图标，我试图将<span>内容直接放在图标左侧：电视（图标）

我的CSS：

#ir-content ul{list-style-type:none !important;}
#ir-content ul.items li{position:absolute;}
#ir-content ul.items li a{background:url(../images/rooms/dollar-sign-sprite.png) no-repeat 9px 10px;width:55px;height:53px;display:block;color:#636363 !important;position:relative;}
#ir-content ul.items li a:hover{background-position:0 -135px;text-decoration:none !important;}
#ir-content li a span{margin:0;padding:6px 20px 6px 0;background:url(../images/rooms/product-title-bg.png) no-repeat right top;position:relative;left:-100%;top:18px;}

更新：这是一个小提琴：

http://jsfiddle.net/pKnXA/1/

请注意我几乎可以将它完全放到图标的左侧，但仍然有一些重叠。

Answer 1

这看起来非常简单，只需将背景图像放在右边并添加填充？

http://reference.sitepoint.com/css/background-position

Answer 2

简单的解决方案是在a元素上添加一些正确的填充，然后将背景图像锚定到右侧。

但是，如果这不起作用，可能是因为你正在使用一个水平添加图像的精灵，你可以做的是添加一个额外的div，其尺寸包含精灵中的单个图像，并且在a元素内向右浮动。

然后，您需要移动CSS以在悬停时重新定位背景图片，以影响新的div。

Answer 3

相对/绝对定位摆弄：http://jsfiddle.net/pKnXA/2/

对齐元素左边的内容

3 个答案: