html - 添加链接会弄乱图标

Question

这就是我目前的have .当我做的时候

<a href="#"></a>

图标向上移动并且变得困惑。如你所见here .蓝色图标是我想要链接的图标，但它不合适。任何帮助都会很棒。

Answer 1

您与此代码有直接的子 CSS 关系:

.fs1 > span {
  position:relative;
  top:10px;
  margin-right:30px;
}

将其更改为包括所有子项:

.fs1 span {
  position:relative;
  top:10px;
  margin-right:30px;
}

Revised CodePen

---

---

CSS 中的 > 运算符表示直接子 关系，如下所示:

<div>
   <a class="one"></a>
   <span>
       <a class="two"></a>
   </span>
</div>

a.one 可以用 div > a 定位，但是，由于 div 和 a.two 之间有一个跨度， div > a 不目标 a.two。

要定位 a.two 和 a.one，您可以将其更改为 div a，这适用于在内部找到的所有 a 标签一个 div 标签。