comment se débarrasser de l'une « frontière invisible » sur vol stationnaire

Question

Je suis en train de faire une barre de navigation avec seulement une bordure droite, mais quand je le fais, il est comme une frontière invisible à gauche sur le vol stationnaire, qui ne entièrement rendre la frontière la couleur que je veux que ce soit. (Une partie du côté gauche est bleu au lieu de bleu clair)

C'est le CSS

#navbar{ 

    width:900px; 
    margin:0 auto; 
    background-color:#3f67c0; 
    height:60px; 


    } 
#navbar ul { 
    list-style-type: none; 
    text-align: left; 
    margin:0px; 
    padding:0px; 
    } 

#navbar ul li { 
    display: inline-block; 

    } 

#navbar ul li a { 
    display:block; 
    border-right:#FFF solid 1px; 
    border-left:none; 
    border-top:none; 
    boder-bottom:none; 
    padding: 20px 40px 20px 40px; 
    text-decoration: none; 
    color: #fff; 
    } 

#navbar ul li a:hover { 

    color: #FFF; 
    background-color: #35b5eb; 

    } 

C'est le HTML

<div id="navbar"> 
<ul> 
<li><a href="#">HOME</a></li> 
<li><a href="#">CLAIM</a></li> 
<li><a href="#">PROOF</a></li> 
<li><a href="#">HELP</a></li> 
</ul> 
</div> 

Answer 1

Ceci est dû à l'espace dans le HTML ainsi qu'une combinaison de display: inline-block et son enfant display: block. La meilleure solution est de supprimer ledit espace

<li><a href="#">HOME</a></li 
><li><a href="#">CLAIM</a></li>... 

Vous pouvez également utiliser font-size: 0 sur le ul et le font-size nécessaire sur le <li> ou <a>, ou utiliser float: left sur la <li> au lieu de display: inline-block, mais ceux-ci peuvent donner lieu à d'autres artefacts

http://jsfiddle.net/ExplosionPIlls/zPjCS/