如何在导航栏上的按钮之间删除空格？

Question

我想删除导航栏上按钮之间的空格。有帮助吗？

[我尝试在-->标签之间使用<!--和<li>，但没有删除导航栏上我的按钮之间的空格。

导航栏上的按钮之间仍然有空格。

  nav {
  height: 10vh;
  background: red;
  background-image: linear-gradient(to left, red, red, black);
  .btn {
    border: none;
    border-radius: 0px;
    background-color: inherit;
    color: white;
    padding: 23px 33px;
    cursor: pointer;
    transition: 0.5s;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
  }
  .btn:hover {
    background: black;
  }
  .nav-links {
    display: flex;
    list-style: none;
    width: 50%;
    weight: 100%;
    justify-content: space-around;
    align-items: center;
    margin-left: auto;
  }
  .nav-links li a {
    color: white;
    text-decoration: none;
    font-size: 20px;
  }

<ul class="nav-links">

  <li><button class="btn About"><a href="https://www.tsn.ca">About</a></button></li>
  <li><button class="btn Our Team"><a href="#">Our Team</a></button></li>
  <li><button class="btn Apps & Games"><a href="#">Apps & Games</a></button></li>
  <li><button class="btn Contact"><a href="#">Contact</a></button></li>

</ul>

Answer 1

我不知道这是不是您想要的，但是您只需从justify-content: space-around;中删除.nav-links。它将消除它们之间的空间。

[justify-content: space-around;用于将元素均匀分布在父级div中，从而产生“多余”空间的感觉。

让我知道是否有帮助。