Выровнять содержимое слева от элемента

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

Простым решением было бы добавить правый отступ к элементу a, а затем привязать фоновое изображение к правой стороне.

Однако, если это не сработает, возможно, потому что вы 'Если вы используете спрайт, который добавляет изображения по горизонтали, вы можете добавить еще div с размерами, которые обертывают одно изображение в спрайте, и поместите его справа внутри элемента a.

Затем вам нужно будет переместить CSS для изменения положения фонового изображения при наведении курсора, чтобы повлиять на новый div.

Answer 2

Относительное / абсолютное позиционирование: http://jsfiddle.net/pKnXA/2/

Answer 3

Это кажется довольно простым, просто расположите фоновое изображение вправо и добавьте отступы?

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