Html 如何摆脱a"；“看不见的边界”；悬停

我试图制作一个只有右边框的导航栏，但是当我这样做的时候，悬停上有一个看不见的左边框，它不能完全使边框成为我想要的颜色。（左侧的一部分为蓝色，而不是浅蓝色）

这是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;

    } 

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

这是由HTML中的空格以及

显示：内联块

及其

显示：块

子项的组合造成的。最好的解决方案是移除所述空间

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

。。。

---

您也可以在

ul

上使用

font-size:0

，在

或
上使用必要的
font-size
，这很有趣谢谢您的回复，我认为空白对html中的任何内容都没有影响