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

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内的元素的宽度，创造出这种“额外”空间的感觉。