Question

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

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

Answer 1

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

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

您还可以使用font-size: 0上的ul和font-size或<li>上的必要<a>，或使用float: left <li>代替display: inline-block，但这些可能会导致其他工件

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

如何在悬停时摆脱“隐形边界”

1 个答案: