ホバー上のCSSリストを調整する方法

Question

私は、マウスを上に置いたときにイメージを背景として、別のイメージを使用しているCSS/HTMLリストを持っています。

唯一の問題は、ホバーイメージが正しく整列しておらず、小さくはあるが目立つギャップがあることです。

私はplaced a link to a test version to help you to see exactly what I meanです。

また、Blueprint CSSをCSSフレームワークとして使用しています。 ソースコードは以下の通りです。

いつものように、あなたのli要素を事前

#navbar{ 
background-image: url('../images/navbar.png'); 
color: white; 
font: 20px arial,sans-serif; 
height: 45px; 
} 
#navbar a{ 
color: white; 
text-decoration: none; 
} 

#navbar ul{ 
list-style: none; 
margin:0; 
padding:0; 
} 

#navbar li{ 
border-right: solid 1px white; 
display: inline-block; 
height: 45px; 
line-height: 45px; 
padding-bottom: 1px; 
padding-left: 10px; 
padding-right: 10px; 
padding-top: 1px; 
} 

#navbar li:hover{ 
background-image: url('../images/navbar-selected.png'); 
background-repeat: repeat-x; 
} 

<div class="container" id="container"> 
    <div class="prepend-top"> 
     <div class="clear" id="navbar"> 
      <ul> 
       <li><a href="index.php">Home</a></li> 
       <li><a href="stock.php">Start HaardHout Vergikelleen</a></li> 
       <li><a href="overview.php">In Jouw Regio</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

で感謝を設定float: left;。

#navbar li { float:left; }