3

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

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

预期结果：

[Mylinktext]<MyImagehere>

我得到的实际结果是

<MyImagehere>[Mylinktext]

我不想在伪类之后使用。因为它在 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>

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

4

2 回答 2

5

在标签<span>中的文本右侧添加一个怎么样？演示anchor

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-14T22:25:00.937 回答
0

当我尝试您的代码时，结果似乎如您所愿：[Mylinktext]<MyImagehere>。我可能错过了一些东西。尝试并解释什么，并将尝试帮助您。

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

于 2013-02-14T22:01:53.920 回答