如何删除导航栏中徽标和列表项之间的空间？

Question

我希望导航栏项目在徽标旁边左对齐，但无法实现。

有人知道怎么回事吗？

它的样子：

我想要的空间：

我的 HTML 代码：

<nav id="nav-bar">

<a href=""><img src="https://assets.codepen.io/7471668/logo+pic.png" id="header-img" alt="company-logo" /></a>

<ul class="nav__menu">
  <li class="nav__item">
    <a class="nav-link" href="">Options</a></li>
  <li class="nav__item">
    <a class="nav-link" href="">How it works</a></li>
  <li class="nav__item">
    <a class="nav-link" href="">Sign-up</a></li
</ul>
  
</nav>

我的 CSS：

#nav-bar {
  display: flex;
  position: fixed;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 1);
  }
.nav__menu {
  display: flex;
  font-size: 0.95rem;
  }
.nav__item {
  margin-right: 3rem;
  font-family: archivo;
  }
.nav-link {
  color: white;
  text-decoration: none;
  }
.nav-link:hover,
.nav-link:focus-visible {
  box-shadow: 0 4px 0 -1px #FFF;
  }
#header-img {
  width: 25%;
  margin-top: 6px;
  margin-left: 10px;
  margin-right: 0;
  }

Answer 1

#nav-bar {
  display: flex;
  position: fixed;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 1);
  }
.nav__menu {
  display: flex;
  font-size: 0.95rem;
  }
.nav__item {
  margin-right: 3rem;
  font-family: archivo;
  }
.nav-link {
  color: white;
  text-decoration: none;
  }
.nav-link:hover,
.nav-link:focus-visible {
  box-shadow: 0 4px 0 -1px #FFF;
  }
#header-img {
/* from width:25% */
  width: 100px;   /*Use px*/
  margin-top: 6px;
  margin-left: 10px;
  margin-right: 0;
  }

<nav id="nav-bar">

<a href=""><img src="https://assets.codepen.io/7471668/logo+pic.png" id="header-img" alt="company-logo" /></a>

<ul class="nav__menu">
  <li class="nav__item">
    <a class="nav-link" href="">Options</a></li>
  <li class="nav__item">
    <a class="nav-link" href="">How it works</a></li>
  <li class="nav__item">
    <a class="nav-link" href="">Sign-up</a></li
</ul>
  
</nav>

我提供了一个 sn-p 请检查它是否是您要查找的输出。

只需使用“px”即可调整图像的宽度。 我把width: 25%;改成了width: 100px;