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>内のテキストの右側にa を追加するのはどうですか? デモ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>. 私はおそらく何かが欠けています。何を試して説明し、あなたを助けようとします。

個人的には、スプライトは使いません。代わりに、色ごとに 1 つの画像を作成するか (その方が作業しやすいと思います)、または必要な文字でフォントを作成します (参照: 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 に答える