添加链接会导致图标混乱。

Question

这是我目前拥有的东西。当我使用<a href="#"></a>时，图标会上移并变得混乱。你可以在这里看到。蓝色图标是我想要链接的那一个，但是它放错位置了。任何帮助都将不胜感激。

- user3444414

Answer 1

您与此代码存在直接子级CSS关系：

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

将其更改为包括所有子元素：

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

修改后的 CodePen

---

---

CSS 中的 > 操作符表示直接子元素关系，如下：

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

a.one 可以使用 div > a 进行定位，但是由于在 div 和 a.two 之间有一个 span，所以 div > a 无法 定位到 a.two。

要同时定位到 a.two 和 a.one，您需要将其更改为 div a，该选择器适用于 div 标签内找到的所有 a 标签。

- Liftoff

Answer 2

你的代码有问题，你忘记关闭标签的起始标记，缺少了>

并且从fs1 > span中移除>，只需将其改为fs1 span

- Banana

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>

- alessandrio

---

我不确定你该如何实现这个。也许一个清晰而快速的答案会有所帮助。大多数情况下，仅仅发布代码并不能立即解决问题。 - Idris

这甚至没有开始回答他的问题或解决问题。 - Frankenscarf