爲什麼我的懸停背景被移動

Question

我正在製作一些標籤，使用背景圖像作爲懸停狀態背景。唯一看起來不錯的是「日​​」。我認爲，因爲它只有3個字符，其他標籤是4個字符。有沒有辦法讓懸停的背景集中在所有的背景上？這是列表的CSS。

li { 
    font: 9pt "Helvetica Neue", Helvetica, Arial, "Trebuchet MS", Trebuchet, serif; 
    margin-top: .192333333em; 
    float: right; 
    height: 19px; 
    width: 40px; 
    margin-left: 10px; 
    display: inline-block; 
    margin: 7px; 
} 
li.current { 
    background: url('img/red-current-bg.png') no-repeat; 
    line-height: 1.6em; 
} 

ul#tabnav { 
    margin: 0; 
} 

ul#tabnav li a { 
    text-shadow: 0 1px #800000; 
    text-decoration: none; 
    padding: 8px 11px; 
    line-height: 1.6em; 
} 

ul#tabnav li:hover { 
    background: url('img/red-current-bg.png') 0 0 no-repeat; 
} 

Answer 1

你能調整背景的水平位置來調整像素或居中圖像嗎？

ul#tabnav li:hover { 
    background: url('img/red-current-bg.png') 3px 0 no-repeat; 
} 
          or 
ul#tabnav li:hover { 
    background: url('img/red-current-bg.png') center top no-repeat; 
}