Нежелательные пробелы между LI

Question

У меня есть UL с созданием главной страницы LI на веб-сайте, происходит то, что между каждым LI есть пробел, который я не могу найти для этого пространства/пробела, я осознавая область между закрытием и открытием проблемы LI, и я уже пытался изменить LI на </li><li> для каждого элемента списка без успеха.

Я уже просматривал стек, и ни один из вопросов с интервалом LI не разрешил мою проблему.

Это происходит в Firefox среди других браузеров, что немного странно, поскольку я действительно использую только просмотр проблем с LI-макетами в IE-браузерах, а именно более ранних версий.

Я изложил код, который я использую ниже, с благодарностью получают любую помощь или совет.

HTML:

<ul class="nav"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link 4</a></li> 
</ul> 

CSS:

ul.nav { 
    height: 40px; 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    background: #555555; 
} 
ul.nav li { 
    color: #FFFFFF; 
    display: inline; 
} 
ul.nav li a { 
    padding: 8px 10px 8px 10px; 
    color: #FFFFFF; 
    font-size: 18px; 
    font-weight: bold; 
    display: inline-block; 
} 
ul.nav li a:hover { 
    background: #660000; 
    text-decoration: none; 
} 

Answer 1

После долгих играя с различными методами предложил исправить пробельные проблемы с HTML-тегами , Why is there an unexplainable gap between these inline-block div elements? был единственной темой, которая могла бы помочь, она подробно описывает проблему с пробелами с использованием тегов DIV, поскольку исправление с использованием UL/LI я нашел ниже единственного решения в моем экземпляре.

Ни один из методов в этом экземпляре не работал, один из них работал с методом «Сбросить размер шрифта», чтобы добавить font-size: 0; в UL.

ul.nav { 
    height: 40px; 
    margin: 0px; 
    padding: 0px; 
    font-size: 0; 
    list-style: none; 
    background: #555555; 
} 

Answer 2

Интервал между линиями/разрывы строк делают разницы, проверить разницу между Ли здесь:

http://jsfiddle.net/33mc9mja/

<ul class="nav"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li></ul> 

должен сделать трюк.

Answer 3

Разрыв существует, поскольку в качестве встроенных элементов LI имеют определенный размер, определенный их размером шрифта. Чтобы избавиться от пробела, установите размер шрифта UL равным 0, оставив размер шрифта для li> a at 18px.

jsfiddle: http://jsfiddle.net/whg8qo9f/2/

ul.nav { 
    height: 40px; 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    background: #555555; 
    font-size:0 
} 

редактировать: имейте в виду, что это будет иметь значение для любых инлайн-блочных элементов