如何在链接后放置图像？

发布于 2024-10-21 15:57:35 字数 444 浏览 3 评论 0原文

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

 <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;
}

但在我的网页中，我得到了链接下方的图像。如何让它们出现在同一行？

原文

I need to have a link in my webpage followed by a question mark image, so that a mouse over on the question mark image, shows a tool tip. This is the code I have:

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

and the corresponding css is:

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

But in my webpage, I get the image below the link. How do I make them appear in the same line?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淤浪 2024-10-28 15:57:35

尝试以下代码：

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

Try the following code:

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

回复收藏 0 原文

风向决定发型 2024-10-28 15:57:35

您需要使用之后。此链接可能有帮助：
http://www.w3schools.com/css/sel_after.asp

回复收藏 0 原文

疑心病 2024-10-28 15:57:35

您可以

<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/ 处检查工作示例

You can do this

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

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