添加链接会混淆图标

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，这适用于在div标签内找到的所有标签。

Answer 2

您的代码已损坏，您忘记关闭<a>开头标记，但遗漏了>

并从>中删除fs1 > span，只需fs1 span

Answer 3

<a></a>

CSS

a:hover, a:active:, a:visited, a:focus, a{
    text-decoration: none;
}

所有行：

<div>
<a><span></span><span></span></a>
<a><span></span><span></span></a>
<a><span></span><span></span></a>
</div>