Question

我有一些网址要添加相同的图片。我有以下代码：

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/

修改

我意识到OP还说从链接文本的开始位置到图像的开始位置的距离始终相同

所以我修改了代码

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

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 4

您需要做的是给它们一个固定的宽度和display: block 你的CSS会是这样的：

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

Answer 5

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

添加图像以与CSS链接

5 个答案: