Как исправить меню?

Question

dhat @dhat

CSS

Как исправить меню?

Почему между элементами меню есть небольшое расстояние в несколько пикселей? Я хочу чтобы меня переключалось мгновенно при переводе курсора.

Описание в деталях: если двигать медленно мышкой горизонтально между пунктами меню, то замететно расстояние между ними в несколько пикселей (кнопки становятся неактивными).

https://codepen.io/dhatt/pen/bZXJpo

upd: решил добавлением отрицательного margin. Но ПОЧЕМУ это происходит я так и не понял. Используется нормалайз цсс - он разве не сбрасывает эти настройки?

Вопрос задан более трёх лет назад
141 просмотр

2 комментария

Подписаться 1 Оценить 2 комментария

Пересмотрел, все у вас отлично работает проверил в chrome
Так. я наверное не понятно выразился. Перключение происходит сразу, НО ЕСТЬ ПРОМЕЖУТОК МЕЖДУ КНОПКАМИ.

Answer 1 · 2016-08-29 23:16:32

Все дело в том, что inline-block элементы имеют небольшой отступ, бороться с этим можно несколькими способами:
1.

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

2.

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

3.

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>
4. Отрицательное margine

5.

<ul>
  <li>one
  <li>two
  <li>three
</ul>

6.

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

7. flexbox

Как исправить меню?

Войдите на сайт