如何在链接后放置图像？

Question

我需要在我的网页上有一个链接，后面跟一个问号图像，这样鼠标悬停在问号图像上，会显示一个工具提示。这是我的代码：

 <p>
  <a class="mainLinks" href="#">Currency Converter</a><a href="#" class="questionIcon">&nbsp;</a>
 </p>

和相应的css是：

 .costSummaryBox .questionIcon{
       background:url(../images/static/question2.png) no-repeat;
       text-decoration:none;
}

但是在我的网页上，我得到了链接下面的图片。如何让它们出现在同一行？

Answer 1

请尝试以下代码：

<p>
   <a class="mainLinks" href="#">Currency Converter&nbsp;<img src="../images/static/question2.png" /></a>
</p>

Answer 2

你需要使用AFTER。此链接可能会有所帮助：
http://www.w3schools.com/css/sel_after.asp

Answer 3

你可以这样做

<p>
    <a class="mainLinks" href="#">Currency Converter</a>
</p>

.mainLinks{
    padding-right:30px;
    background:#fff url(...) no-repeat right top;
    text-decoration:none;
}

检查http://jsfiddle.net/eMLkS/

处的工作示例