將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圖像放置在錨標籤的右側？

回答

相關問題