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

【问题标题】：How do I remove spaces between my buttons on my navbar?如何删除导航栏上按钮之间的空格？
【发布时间】：2019-10-09 18:54:22
【问题描述】：

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

我尝试在<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>

【问题讨论】：

到目前为止你尝试过什么？你的CSS在哪里？如果您希望我们帮助您，您必须向我们展示更多。
请编辑您的问题并添加所有这些 css。在 cmets 中这里不容易理解。另外，创建一个代码 sn-p 向我们展示问题所在？我看不到按钮之间有任何空格。

标签： css navbar

【解决方案1】：

我不知道这是否是您想要的，但您可以简单地从您的 .nav-links 中删除 justify-content: space-around;。它将删除它们之间的空间。

justify-content: space-around; 用于将元素均匀分布在div 的宽度内，营造出这种“额外”空间的感觉。

【讨论】：