Не могу найти способ удалить пробелы / границы вокруг элементов моего списка - PullRequest
Новая
       20

Не могу найти способ удалить пробелы / границы вокруг элементов моего списка

2 голосов
/ 06 мая 2020

Моя панель навигации становится раскрывающимся меню для мобильных устройств. Это меню CSS, однако выпадающие элементы имеют что-то вроде белого пространства или границы вокруг них.

Я перепробовал все варианты, перечисленные здесь: Как удалить пробел между элементами списка К сожалению, эти решения не помогли мне. Я также разобрал меню и мог исправить некоторые границы, переместив #navigation a margin-top на 0, уменьшив непрозрачность фона на 0,05 и установив высоту элемента списка на 38 пикселей. Тем не менее, "граница" остается бельмом на глазу на некоторых устройствах, в том числе iPhone X.

Этот сайт является сайтом для моего собственного проекта c musi, поэтому я запустил его, если это поможет: http://mynameisdidi.com/

@media screen and (max-width: 695px) {
  .hamburger {
    display: none;
  }
  .hamburger.showClass {
    display: block;
    position: fixed;
  }
  nav {
    position: relative;
    z-index: 500;
  }
  ul {
    float: right;
    width: 100%;
    transition: .45s ease-in;
    margin-top: -25px;
  }
  li {
    width: 95%;
    height: 38px;
  }
  #navigation a {
    display: block;
    width: 58.5%;
    margin-right: 1px;
    margin-top: 0;
    float: right;
    background-color: rgba(255, 255, 255, 0.75);
    color: #b406c7;
    /*magenta*/
    text-align: center;
    padding: 6px;
    font-size: 19px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
  }
}
<div class="hamburgerIcon" onclick="toggleClass()">
  <h2>&#9776;</h2>
</div>

<nav id="navigation">
  <ul class="hamburger">
    <li><a href="index.html">Home</a></li>
    <li><a href="music.html">Music</a></li>
    <li><a href="bio.html">Bio</a></li>
    <li><a href="booking.html">Booking</a></li>
  </ul>
</nav>

Извините, если этот пост не соответствует критериям публикации, мой первый пост здесь. (Просто дайте мне знать на будущее. Спасибо.)

1 Ответ

1 голос
/ 06 мая 2020

Если вы имеете в виду пробелы между элементами li, это вызывает height: 38px;. Измените его (удалите), и он будет без пробелов.

! [Как я вижу li-пробелы] [1] https://i.stack.imgur.com/v6Rhl.png

...