链接的可点击区域位置错误

Question

我想在我的导航栏中实现Twitter和Instagram的链接，但是当我使用普通标签添加链接时，可点击区域不是直接在图标上，而是在右侧或底部。无论如何我可以直接在图标上创建链接区域吗？

.nav{
  z-index: 1;
  top: 0;
  position: absolute;
  height: 120px;
  width: 100%;
  max-width: 100%;
}

.top-nav{
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 40px;
  border-bottom: solid 1px #efefef;
  background: #fff;
  z-index: 2;
}

.top-nav a{
  top: 13px;
  position: relative;
  float: right;
  padding-right: 22px;
}

.top-nav .quote{
  font-size: 10px;
  top: 5px;
  position: absolute;
left: 0;
right: 0;
color: #000;
}

.fa-instagram{
  position: relative;
  float: right;
}

.fa-twitter{
  position: relative;
  float: right;
}

<div class="top-nav">
      <div class="nav-wrapper">
          <a href="https://www.instagram.com/ntvcreative/" target="_blank">
            <i class="fab fa-instagram" aria-hidden="true"></i>
          </a>
          <a href="https://www.instagram.com/ntvcreative/" target="_blank">
          <i class="fab fa-twitter" aria-hidden="true"></i>
          </a>
            <p class="quote">'Everyone's Born Native'</p>
      </div>
  </div>
  
  
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Answer 1

绝对定位的<p>元素重叠并阻止鼠标访问图标 一种解决方案是在HTML代码中的<p>元素之前移动<a>。

.nav {
  z-index: 1;
  top: 0;
  position: absolute;
  height: 120px;
  width: 100%;
  max-width: 100%;
}

.top-nav {
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 40px;
  border-bottom: solid 1px #efefef;
  background: #fff;
  z-index: 2;
}

.top-nav a {
  top: 13px;
  position: relative;
  float: right;
  padding-right: 22px;
}

.top-nav .quote {
  font-size: 10px;
  top: 5px;
  position: absolute;
  left: 0;
  right: 0;
  color: #000;
}

.fa-instagram {
  position: relative;
  float: right;
}

.fa-twitter {
  position: relative;
  float: right;
}

<div class="top-nav">
  <div class="nav-wrapper">
    <p class="quote">'Everyone's Born Native'</p>
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-instagram" aria-hidden="true"></i>
    </a>
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-twitter" aria-hidden="true"></i>
    </a>
  </div>
</div>


<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

其他解决方案包括：

从left元素中删除<p>定位：

.nav {
  z-index: 1;
  top: 0;
  position: absolute;
  height: 120px;
  width: 100%;
  max-width: 100%;
}

.top-nav {
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 40px;
  border-bottom: solid 1px #efefef;
  background: #fff;
  z-index: 2;
}

.top-nav a {
  top: 13px;
  position: relative;
  float: right;
  padding-right: 22px;
}

.top-nav .quote {
  font-size: 10px;
  top: 5px;
  position: absolute;
  left: 0;
  /*right: 0; REMOVED*/
  color: #000;
}

.fa-instagram {
  position: relative;
  float: right;
}

.fa-twitter {
  position: relative;
  float: right;
}

<div class="top-nav">
  <div class="nav-wrapper">
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-instagram" aria-hidden="true"></i>
    </a>
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-twitter" aria-hidden="true"></i>
    </a>
    <p class="quote">'Everyone's Born Native'</p>
  </div>
</div>


<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

将<p>元素向左浮动：

.nav {
  z-index: 1;
  top: 0;
  position: absolute;
  height: 120px;
  width: 100%;
  max-width: 100%;
}

.top-nav {
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 40px;
  border-bottom: solid 1px #efefef;
  background: #fff;
  z-index: 2;
}

.top-nav a {
  top: 13px;
  position: relative;
  float: right;
  padding-right: 22px;
}

.top-nav .quote {
  float: left;
  font-size: 10px;
  color: #000;
}

.fa-instagram {
  position: relative;
  float: right;
}

.fa-twitter {
  position: relative;
  float: right;
}

<div class="top-nav">
  <div class="nav-wrapper">
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-instagram" aria-hidden="true"></i>
    </a>
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-twitter" aria-hidden="true"></i>
    </a>
    <p class="quote">'Everyone's Born Native'</p>
  </div>
</div>


<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>