<a> tag in css does not appear to be correct

Question

This is my code for html/css:

<p>
  <img src="image.jpeg">
  <a href="#" style="position: absolute;margin-left: 3%;">Upgrade or 
  downgrade my plan</a>
</p>

and this is what appears:

但是，我希望它看起来像这样：

如何使其显示为上图？

Answer 1

标记a的样式与其他样式重叠。使用此代码更改它：

p a {
    border-bottom: none!important;
    text-decoration: underline!important;
    font-size:18px!important;
    font-family: "Times New Roman", Georgia, Serif; 
}

Answer 2

<style>
.link-ref {
    position: absolute; /*already existing style*/
    margin-left: 3%; /*already existing style*/
    text-decoration: underline;
    color: #111;
}
</style>

<p>
  <img src="image.jpeg">
  <a href="#" class="link-ref">Upgrade or downgrade my plan</a>
</p>

添加！important并为常用元素添加注释可能会影响页面中的其他元素

Answer 3

检查以下链接。实际上这是一个重复的问题：

underline tag when hovering