为啥我的标志和导航栏之间有巨大的可点击间隙以及如何摆脱它？

Posted 2023-03-05

【中文标题】为啥我的标志和导航栏之间有巨大的可点击间隙以及如何摆脱它？

【英文标题】：Why is there a huge clickable gap in between my logo and my navigation bar and how to get rid of it?为什么我的标志和导航栏之间有巨大的可点击间隙以及如何摆脱它？

【发布时间】：2021-03-22 09:11:19

【问题描述】：

* 
  box-sizing: border-box;
  padding: 0;
  margin: 0;


ul 
  list-style-type: none;


.nav-links,
.logo 
  text-decoration: none;
  color: #000;


.logo 
  max-width: 80%;
  width: 20%;
  height: 20%;


.navbar img 
width: 10%;
height: auto;
display: in-line block;


.navbar 
  padding: 20px;
  height: 50vh;


.navbar,
ul 
  display: flex;
  flex-direction: row;


ul li 
  padding: 0 5px;


.wrapper 
  display: flex;
  justify-content: space-between;
  width: 100%;

<nav class="navbar">
  <a href="#"><img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" ></a>
  <div class="wrapper">
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
    </ul>
    <ul class="ul2">
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </div>
</nav>

上面是我的代码，你可以看到我的图片和上面突出显示的图片之间有很大的差距：

它之间的空白似乎也是可点击的。我想摆脱它，所以它看起来像这样（保持关于我们和联系我们之间的间距，但删除图像和主页之间的间距）：

我尝试摆脱所有填充并将我的徽标更改为我的无序列表，但这没有任何作用。

【参考方案1】：

你试图让图片在<a>标签内占10%，这意味着<a>标签和<img>标签之间的差异必须是90%，这就是我的理解。因此，您只需将 % 更改为像素，或更改 <a> 和 <img> 标记的百分比即可解决您的问题。

.navbar img 
  width: 100%;
  height: auto;
  display: in-line block;


.navbar a 
  width: 10%;

但我可以看到你在 html/css 中混合了所有内容，你可以通过这种方式获得相同的结果：

* 
  box-sizing: border-box;
  padding: 0;
  margin: 0;


.navbar 
  display: flex;
  flex-direction: row;
  justify-content: space-between;


.leftbar, .rightbar 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 40%;


.rightbar 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 16%;


.navbar img 
  width: 100%


.navbar a 
  width: 20%;


.nav-links 
  text-align: center;

<nav class="navbar">
  <div class="leftbar">
    <a href="#"><img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" ></a>
    <a href="#" class="nav-links">Home</a>
    <a href="#" class="nav-links">Products</a>
    <a href="#" class="nav-links">About&nbsp;Us</a>
  </div>
  <div class="rightbar">
    <a href="#" class="nav-links">Contact&nbsp;Us</a>
    <a href="#" class="nav-links">Blog</a>
  </div>
</nav>

【参考方案2】：

响应他在cmets中的请求，这里是最终的代码sn-p：

* 
  box-sizing: border-box;
  padding: 0;
  margin: 0;


ul 
  list-style-type: none;


.nav-links,
.logo 
  text-decoration: none;
  color: #000;


.logo 
  max-width: 80%;
  width: 20%;
  height: 20%;


.navbar img 
width: 10%;
height: auto;
display: in-line block;


.navbar 
  padding: 20px;
  height: 50vh;


.navbar,
ul 
  display: flex;
  flex-direction: row;


ul li 
  padding: 0 5px;


.wrapper 
  display: flex;
  justify-content: space-between;
  width: 100%;


.nav-logo
  text-decoration: none;
  color: #000;
  padding-left: 10px;

<nav class="navbar">
  <a href="#"><img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" ></a>
  <div class="wrapper">
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links nav-logo">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
    </ul>
    <ul class="ul2">
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </div>
</nav>

【参考方案3】：

在我看来，您正试图通过 CSS 文件中的 logo 名称来定位一个类，但是当我查看您的 HTML 时，我没有看到 class='logo'。

【讨论】：

他在“navbar”中引用“IMG”的所有标签时不需要引用logo。

【参考方案4】：

为获得最佳效果，请按高度设置图像大小，例如：

img 
   height: 30px;
   width: auto;

查看工作小提琴https://jsfiddle.net/8hdt4rfu/1/

【讨论】：

由于某种原因，这适用于我的 codepen，但不适用于我的编辑器的实时服务器。奇怪的

它在编辑器的实时服务器中看起来如何？检查您的代码可能具有的额外不必要的 CSS，因为这一定是您没有相同结果的原因。

【参考方案5】：

尝试将图像的宽度更改为一定数量的像素，而不是像这样的百分比：

.navbar img 
width: 50px;

【讨论】：

谢谢，它减少了间隙，但即使我将宽度设置为 1 像素，间隙仍然存在，知道如何消除该间隙，以便我可以调整徽标和“家”？

向 Home 添加第二个类并将其 CSS 设置为“margin-left: 10px”@JohnnyRobertson