0

我正在尝试制作一个只有右边框的导航栏，但是当我这样做时，悬停时就像一个不可见的左边框，它并没有完全使边框成为我想要的颜色。（左侧的一部分是蓝色而不是浅蓝色）

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

1 回答 1

2

这是由 HTML 中的空格display: inline-block及其display: block子元素的组合引起的。最好的解决方案是删除所述空间

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

您也可以font-size: 0在 or 上使用uland 必要font-size的，或在而不是使用上使用，但这些可能会导致其他工件<li><a>float: left<li>display: inline-block

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

于 2013-05-19T01:33:31.967 回答