सीएसएस/एचटीएमएल - क्षैतिज सूची - सूची आइटम के बीच इस रहस्य अंतर को हटा दें? (तस्वीर देखें)

Question

मुझे मेनू बार के साथ परेशानी हो रही है जो मैं कर रहा हूं। ऐसा लगता है कि मेनू आइटमों और मेरे जीवन के बीच एक अंतर है, मुझे समझ में नहीं आता कि इसका क्या कारण है।

नीचे स्क्रीनशॉट के विवरण के रूप में, पहला लिंक (घर) वर्तमान पृष्ठ है और इसे हाइलाइट किया गया है। दूसरा लिंक (पेज 1) एक होवर प्रभाव है जबकि मेरा कर्सर इस आइटम पर है। आप देखेंगे कि एक अंतर है (पृथ्वी पर क्या यह कारण हो रहा है ?!) इन दो वस्तुओं के बीच जो मेनू के div के पृष्ठभूमि रंग को दिखाता है।

यह ध्यान देने योग्य हो सकता है कि मैं फ़ायरफ़ॉक्स का नवीनतम संस्करण उपयोग कर रहा हूं।

यहाँ सूची के लिए एचटीएमएल है: यहाँ

<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> 

और सीएसएस है:

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; 
} 

तो

यहाँ मेरी समस्या का स्क्रीनशॉट है कोई भी मुझे इसके संबंध में कुछ इनपुट प्रदान कर सकता है यह जीआर होगा खासतौर से सराहना की!

कोई सुझाव, सलाह, समर्थन या प्रतिक्रिया का स्वागत है! आपको बहुत - बहुत धन्यवाद!

संपादित करें:

मैं सीएसएस में पहले स्थान पर इस की क्या ज़रूरत है:

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

EDIT2:

JsFiddle लिंक:

http://jsfiddle.net/Gbg7J/

Answer 1

अंतराल के कारण होता है अपनी सूची वस्तुओं को अलग करने वाले टैब और लाइन फ़ीड्स द्वारा; इनलाइन ब्लॉक तत्व (या inline formatting context के भीतर भाग लेने वाला कोई भी तत्व) आपके HTML में उनकी संरचना के प्रति संवेदनशील है।

आप या तो 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> 

उपयोग की टिप्पणियां:

<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> 

अकेले HTML छोड़ दो और floatinstead का उपयोग करें (और कंटेनर स्पष्ट):

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

.nav ul { 
    overflow: hidden; 
} 

या सेट माता-पिता और 012 पर li

.nav ul { 
    font-size: 0; 
} 

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

---

^{इसके अलावा पर, दोनों पर एक नज़र डालें: आपकी समस्या का एक तेज़ और सटीक जवाब की सुविधा के लिए एक JsFiddle How to remove the space between inline-block elements? & http://css-tricks.com/fighting-the-space-between-inline-block-elements/}