Создание навигации - inline-block или float?

Question

Когда я пытаюсь создать навигацию со встроенным блоком, я получаю 4 пикселя справа от каждого элемента списка.

Когда я делаю это, перемещая каждый элемент списка, он отлично работает.

Есть ли причина, по которой первый вариант применяет этот 4px? Я установил для ВСЕГО значение поля 0px и отступа 0px, я не понимаю этого. Даже Firebug сообщает, что он имеет 0, но разрыв все еще есть.

Спасибо

Answer 1

Да, пространство предусмотрено и должно быть

Есть ли причина для этого? Да, это. То, что было добавлено, на самом деле является пробелом . Так же, как если бы у вас было две строки текста. Браузеры помещают пробелы между текстами в отдельные строки, чтобы последние слова не касались первых слов следующей строки:

<p>
  This is my text that's in two lines
  inside my HTML source.
</p>

Между строками и внутри должно быть обычное пространство слов, поэтому в браузере правильно отображается текст:

Это мой текст, который состоит из двух строк в моем источнике HTML.

То же самое происходит в вашем случае, потому что ваши элементы встроены. Ваши элементы навигации перечислены по одному в строке в источнике HTML, поэтому между ними добавляется разрыв слова.

Как избежать лишних пробелов между элементами?

Существует три основных подхода к решению проблемы . Все они работают на предпосылке, чтобы поместить все элементы в одну строку, как видно на HTML-рендерере:

1. Поместите все элементы без пробелов в одну строку :

   <ul>
       <li>First</li><li>Second</li>...<li>Last</li>
   </ul>
   

   Этот элемент фактически помещает все элементы в одну строку, что может затруднить манипулирование этими элементами. Если бы каждый LI имел внутри тег привязки (с длинной ссылкой), эта строка становится слишком длинной для обработки.

2. Разрывы строк для комментариев :

   <ul><!--
       --><li>First</li><!--
       --><li>Second</li><!--
       ...
       --><li>Last</li><!--
   --></ul>
   

3. Заставить теги разбить строку :

   <ul
      ><li>First</li
      ><li>Second</li
       ...
      ><li>Last</li
   ></ul>
   

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

Результат всех трех из них можно увидеть в этом примере JSFiddle .

Выберите тот, который подходит вам больше всего. Я обычно использую комментарии, потому что это меньше всего отвлекает в моем редакторе разработки, потому что комментарии очень тонкие.