Добавить изображение для ссылки с CSS

Question

У меня есть несколько URL, к которым я хочу добавить одно и то же изображение.У меня есть следующий код:

a.linkArrow
{ 
    background: transparent url('../images/abc.png') no-repeat center right;
    padding-right: 60px;
}

И пример ссылки:

<a class="inkArrow" href="#abc">Abc?</a>

Проблема в том, что изображение появляется слева от текста ссылки.Я хочу, чтобы изображение всегда отображалось справа от текста И чтобы расстояние от начальной позиции текста ссылки до начальной позиции изображения всегда было одинаковым.Поэтому, когда у меня есть несколько ссылок подряд, изображения ссылок выравниваются.Изображение должно быть кликабельным и приводить к тому же URL-адресу, что и ссылка (я не уверен, возможно ли заключить его в тот же тег для этого подхода.

Есть идеи?

Answer 1

это «правый центр», а не «правый центр», см. Пример: http://jsfiddle.net/bingjie2680/ZtLCA/

также работает, когда вы хотите, чтобы они находились на одинаковом расстоянии между текстовой ссылкой и изображением, см. Пример: http://jsfiddle.net/bingjie2680/ZtLCA/1/

Answer 2

Вы можете сделать это и с jQuery.

<a href="#" class="imageLink">Some Link</a>

$('.imageLink').each(function(){
   $(this).append(' <img src="YOUR IMAGE HERE">'); 
});

http://jsfiddle.net/jasongennaro/6Nc3n/

РЕДАКТИРОВАТЬ:

Я понял, что ОП также сказал расстояние от позиции start текста ссылки до позиции start изображения всегда одинаково

Поэтому я изменил код

var finalWidth = 0;
var getWidth;

$('.imageLink').each(function(){
    getWidth = $(this).width();      
    if(getWidth > finalWidth){
      finalWidth = getWidth;
    }
});

finalWidth +=15;

$('.imageLink').each(function(){
   var getText = $(this).text();
    $(this).html('<span style="display:inline-block; width:' + finalWidth + 'px;">' + getText + '</span>');
   $(this).append(' <img src="http://icdn.pro/images/en/l/e/left-arrow-icone-3702-32.png">');
   $(this).css('textDecoration','none'); 

});

Для этого нужно получить width каждого текста ссылки.Если проверяет, является ли это width самым длинным, если не игнорирует, но если да, то делает его finalWidth.Это finalWidth затем добавляется к новому span, созданному вокруг текста и стилизованному с помощью inlineblock.

Обновленная скрипка

http://jsfiddle.net/jasongennaro/6Nc3n/2/

Answer 3

Что вам нужно сделать, это дать им фиксированную ширину и display: block.
Ваш CSS будет выглядеть так:

a.linkArrow
{
  background: transparent url('../images/abc.png') no-repeat right center;
  display: block;
  width: 100px;
}

Answer 4

a.linkArrow
{ 
    background: transparent url('../images/abc.png') no-repeat center right;
    display:block;
    width: /* image width PLUS the distance you want from the text px */;
    height: /* image height px */;
}

Answer 5

.inkArrow
{ 
    background:url('/logo.png') no-repeat right center;
}