css 中的 <a> 标记似乎不正确答案

【问题标题】：<a> tag in css does not appear to be correctcss 中的 <a> 标记似乎不正确
【发布时间】：2017-10-31 04:15:03
【问题描述】：

这是我的 html/css 代码：

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

这就是出现的内容：

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

如何让它看起来像上图？

【问题讨论】：

文字如你所愿，可能有其他代码干扰。 jsfiddle.net/6x2vpu6b

标签： html css

【解决方案1】：

标签a的样式被其他样式重叠了。所以用这个代码改变它：

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

【讨论】：

【解决方案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 并为常见元素添加注释可能会影响页面中的其他元素

【讨论】：