CSS/HTML - Horizontale Liste - Entfernen Sie diese Lücke zwischen Listenelementen? (Siehe Bild)

Question

Ich habe Probleme mit einer Menüleiste, die ich mache. Es scheint, dass es eine Lücke zwischen den Menüpunkten gibt und für das Leben von mir verstehe ich nicht, was der Grund dafür ist.

Als Beschreibung zum folgenden Screenshot ist der erste Link (Home) die aktuelle Seite und ist hervorgehoben. Der zweite Link (Seite 1) ist ein Hover-Effekt, während sich der Cursor über diesem Objekt befindet. Sie werden bemerken, dass es eine Lücke zwischen diesen beiden Elementen gibt, die die Hintergrundfarbe von div zeigt, die das Menü enthält.

Es kann sich lohnen zu beachten, dass ich die neueste Version von Firefox verwende. Hier

ist ein Screenshot von meinem Problem:

Hier ist der HTML-Code für die Liste:

<div class="nav"> 
    <ul> 
     <li class="selectedPage"><a href="#">HOME</a></li> 
     <li><a href="#">PAGE1</a></li> 
     <li><a href="#">PAGE2</a></li> 
    </ul> 
<!-- end .nav --></div> 

Und hier ist die CSS:

div.nav { 
    width: 750px; 
    background: #52b5f0; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzUyYjVmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzM2OTlkMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iIzE5NjM4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 
    background: -moz-linear-gradient(top, #52b5f0 5%, #3699d0 49%, #19638a 95%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#52b5f0), color-stop(49%,#3699d0), color-stop(95%,#19638a)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #52b5f0 5%,#3699d0 49%,#19638a 95%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #52b5f0 5%,#3699d0 49%,#19638a 95%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #52b5f0 5%,#3699d0 49%,#19638a 95%); /* IE10+ */ 
    background: linear-gradient(to bottom, #52b5f0 5%,#3699d0 49%,#19638a 95%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52b5f0', endColorstr='#19638a',GradientType=0); /* IE6-8 */ 
} 

div.nav ul { 
    list-style: none; /* this removes the list marker */ 
} 

div.nav li { 
    display: inline-block; 
} 

div.nav li.selectedPage { 
    background: #41ff5f; 
} 

div.nav li.selectedPage a { 
    color: #10653b; 
} 

div.nav a, div.nav a:visited { 
    padding: 5px; 
    display: block; 
    width: 120px; 
    text-decoration: none; 
    color: #FFFFFF; 
    font-weight: bold; 
    text-align: center; 
} 

div.nav a:hover, div.nav a:active, div.nav a:focus { 
    background: #41ff5f; 
    color: #10653b; 
} 

Wenn irgendjemand könnte mir etwas Input in Bezug darauf liefern, es wäre gr Ich werde sehr geschätzt!

Alle Vorschläge, Ratschläge, Unterstützung oder Feedback sind willkommen! Ich danke dir sehr!

EDIT:

ich das früher in der CSS anstelle tun haben:

ul, li { 
    padding: 0; 
    margin: 0; 
} 

EDIT2:

JsFiddle-Link:

http://jsfiddle.net/Gbg7J/

Answer 1

Der Spalt verursacht wird durch die Tabs und Zeilenvorschübe, die Ihre Listenelemente voneinander trennen; Inline-Blockelemente (oder jedes Element, das an der inline formatting context teilnimmt) reagieren empfindlich auf ihre Struktur in Ihrem HTML.

können Sie entweder remove the spaces completely:

<ul> 
    <li class="selectedPage"><a href="#">HOME</a></li><li><a href="#">PAGE1</a></li<li><a href="#">PAGE2</a></li> 
</ul> 

Verwenden Kommentare:

<div class="nav"> 
    <ul> 
     <li class="selectedPage"><a href="#">HOME</a></li><!-- 
     --><li><a href="#">PAGE1</a></li><!-- 
     --><li><a href="#">PAGE2</a></li><!-- 
    --></ul> 
<!-- end .nav --></div> 

Lassen Sie den HTML allein und verwenden floatinstead (und löschen Sie den Behälter):

.nav ul li { 
    float: left; 
    /*display: inline-block;*/ 
} 

.nav ul { 
    overflow: hidden; 
} 

Oder gesetzt font-size: 0; auf dem Eltern und then reset it auf dem li

.nav ul { 
    font-size: 0; 
} 

.nav li { 
    display: inline-block; 
    font-size: 16px; 
} 

---

^{Auch einen Blick auf beide nehmen: How to remove the space between inline-block elements? & http://css-tricks.com/fighting-the-space-between-inline-block-elements/}