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することも、 の代わりに を使用することもできますが、これらは他のアーティファクトを引き起こす可能性がありますulfont-size<li><a>float: left<li>display: inline-block

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

于 2013-05-19T01:33:31.967 に答える