如何調整懸停圖像上的CSS列表

Question

我有一個CSS/HTML列表使用圖像作爲背景和鼠標懸停時的不同圖像。

唯一的問題是懸停圖像沒有正確排列，並有一個小的但明顯的差距。我有placed a link to a test version to help you to see exactly what I mean。

我也使用Blueprint CSS作爲CSS框架。 源代碼如下。

和往常一樣，在此先感謝

#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;您li元素。

#navbar li { float:left; }