将Sprite图像放置在锚标签的右侧？

我有CSS精灵图像。它工作正常，但问题是我想要图像右侧的锚标记的文本。但它显示在左侧。精灵图像在这里。将Sprite图像放置在锚标签的右侧？

http://jstiles.com/temp/1360875952/ctrls/css-sprite.png

预期结果：

[Mylinktext]<MyImagehere>

实际结果是什么，我得到的是

<MyImagehere>[Mylinktext]

我不想伪后使用class.Becuase它不会在锻炼身体IE7浏览器也是如此。我的代码如下。

.ctrls 
    { 
     font-family:Arial; 
     font-weight:bold; 
     font-size:16px; 
     color:black; 
     background-image: url(images/ctrlsprite.png); 
     //background-image: url(images/css-sprite.png); 
     background-repeat:no-repeat; 
     text-decoration:none; 
     display: inline-block; 
     padding-left:30px; 
    } 
    .ctrls:hover 
    { 
     background-position: 0px -252px; 
     text-decoration:underline;  
    } 
    a.magenta 
    { 
     background-position:0px -144px; 
    }

和HTML

<div> 
    <p>Magenta</p> 
    <a href="#" class="ctrls magenta">Et Movet</a> 
</div>

我如何放置文本的图像右侧？

来源

2013-02-14 svk

IE7是新的IE6。更好的是它被掩埋和遗忘。 – 2013-02-14 21:56:43

[背景位置]（https://developer.mozilla.org/en-US/docs/CSS/background-position）是否适合您？ – 2013-02-14 21:56:47

@FloydPink通过使用背景位置，我从Sprite中撷取特定图像。现在我想将图像放在锚标记文本的右侧。我希望如果你看到代码，你可以明白... – svk 2013-02-14 22:02:38

如何将<span>添加到anchor标签文本的右侧？ Demo

HTML

<div> 
    <p>Magenta</p> <a href="#" class="ctrls magenta">Et Movet <span class="icon"></span></a> 
</div>

CSS

.ctrls { 
    font-family:Arial; 
    font-weight:bold; 
    font-size:16px; 
    color:black; 
    text-decoration:none; 
} 
.ctrls:hover { 
    text-decoration:underline; 
} 
.ctrls .icon { 
    display: inline-block; 
    background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png); 
    background-repeat:no-repeat; 
    width: 16px; 
    height: 16px; 
    background-position:0px -144px; 
} 
.ctrls:hover .icon { 
    background-position: 0px -252px; 
}

来源

2013-02-14 22:25:00

我需要把它交给开发者。所以我不能每次都解释它们来增加span.Any其他的解决方案......？（没有Javascript） – svk 2013-02-14 22:29:10

如果'：after'和一个额外的'span'不起作用，你想要定位一个精灵背景，我不知道任何其他选项。一切顺利！ – 2013-02-14 22:34:00

当我尝试你的代码时，结果似乎是你想要的：[Mylinktext] <MyImagehere>。我可能错过了一些东西。试着解释一下，并试着帮助你。

就我个人而言，我不会使用精灵。相反，我会为每种颜色制作一张图片（我发现使用起来更容易），或者甚至更好地使用我想要的字符制作字体（参考：http://mashable.com/2011/11/17/free-font-creation-tools/;我还没有尝试过任何程序， t知道它们有多好）然后使用@ font-face Rule（参考：http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp）。

来源

2013-02-14 22:01:53 matsolof

我更新了链接。请检查那里 – svk 2013-02-14 22:05:14

将Sprite图像放置在锚标签的右侧？

回答

相关问题