时间戳

首页 > 解决方案 > 如何使徽标的可点击区域与导航栏的徽标大小相同？

html - 如何使徽标的可点击区域与导航栏的徽标大小相同？

问题描述

我的导航栏中的徽标有问题。当我将鼠标悬停在我的徽标上时，它让我悬停的次数超出了应有的范围。更喜欢一些像素。但是当我降低分辨率时，就像手机一样，徽标最终占据了导航右侧汉堡包之前的所有空间。

* {
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

nav img {
  width: 50%;
  padding: 10px 0;
}

nav a {}

.fa-bars {
  margin-right: 20px;
}
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/aaefe49bc9.js" crossorigin="anonymous"></script>


<!-- Body -->
<div class="wrapper">
  <nav>
    <a href="index.html"><img src="https://via.placeholder.com/100.png"></a>
    <i class="fas fa-bars"></i>
  </nav>
</div>

标签： htmlcss

解决方案

因为锚点比图像大，原因有 3 个。（申请a { border: 1px solid red;证明）：

  1. CSS 行nav img { width: 50%; }让图像只包含锚点宽度的 50%。意味着锚的宽度是必要的两倍。
  2. 这条线nav img { padding: 10px 0; }还在锚点内增加了额外的空间。
  3. 图像是一个内联元素，例如内联减速空间。用于img { display: block; }删除它。

/* changes */
nav img {
  display: block
}

/* apply this instead of the images padding */
nav a {
  margin: 10px 0;
}

/* Original CSS */
* {
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

/* remove this part
nav img {
  width: 50%;
  padding: 10px 0;
}
*/

nav a {}

.fa-bars {
  margin-right: 20px;
}
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/aaefe49bc9.js" crossorigin="anonymous"></script>


<!-- Body -->
<div class="wrapper">
  <nav>
    <a href="index.html"><img src="https://via.placeholder.com/100.png"></a>
    
    <i class="fas fa-bars"></i>
  </nav>
</div>

推荐阅读