Как убрать пробелы между кнопками на панели навигации? - PullRequest
1 голос
/ 09 октября 2019

Я хочу убрать пробелы между кнопками на панели навигации. любая помощь?

я пытался использовать --> и <!-- между тегами <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>

1 Ответ

0 голосов
/ 09 октября 2019

Я не знаю, хотите ли вы этого, но вы можете просто удалить justify-content: space-around; из вашего .nav-links. Это удалит пространство между ними.

justify-content: space-around; используется для равномерного распределения элементов в пределах ширины div, создавая ощущение «дополнительного» пространства.

Позвольте мнезнаю, помогло ли это.

...