CSS 精灵 - 移动导航背景(悬停、活动等)+ 元素之间的空格

Question

>我正在使用CSS精灵做一个导航菜单，而不是上传大量图像，而是将它们全部合并在一起，可以通过移动背景位置来查看悬停，活动效果，即 http://www.threestyles.com/tutorials/coding-apples-navigation-bar-using-css-sprites/

我的导航的不同之处在于我在导航元素之间有空格，并且我找不到如何移动背景的方法。

元素要么

彼此弹出得太近（即在元素之间悬停时元素之间没有空间），要么如果我更改属性，背景移动太少/太多。

（http://s17.postimage.org/ska9gj065/navprrrob.jpg）

这是我的导航和大小：

"Priser"按钮 - 宽度：100px;
"Priser"和"Reservere"之间的空格 - 15px。
"储备" - 宽度：120px;
"Reservere"和"Klub"之间的空格 - 14px。
"Klub" - 宽度：100px;

很抱歉没有把所有内容都放在图像上。

这是我的 HTML：

<div class="nav">
  <ul id="nav">
    <li id="list1"><a href="#"><span>Priser</span></a></li>
    <li id="list2"><a href="#"><span>Reservere</span></a></li>
    <li id="list3"><a href="#"><span>Klub</span></a></li> 
  </ul>
</div> 

还有我的 CSS：

#nav span {
  display: none;
}
#nav li {
  list-style-type: none;
  float: left;
}
#nav a {
  height: 45px;
  display: block;
}
#list1 { width: 100px; }
#list2 { width: 130px; }
#list3 { width: 100px; }
#list1 a:hover {
  background: url(images/nav.png) 0px -45px no-repeat;
}
#list2 a:hover {
  background: url(images/nav.png) -115px -45px no-repeat;   
}
#list3 a:hover {
  background: url(images/nav.png) -260px -45px no-repeat;   
}

在您测试它之前可能不太容易理解，但我现在没有地方托管它。

所以，问题：

1. 当元素之间有未使用的空间时，是否可以使用此 CSS 精灵？
2. 如果是，在这种情况下应该是什么参数？

Answer 1

当然你可以做到。首先，您必须为<li> -s 提供与背景按钮完全相同的宽度。然后使用margin获得所需的间距，即：

#list2 { width: 120px; margin-right: 15px; }

Answer 2

你应该给具有背景图像的容器提供宽度和高度，并使其显示：块与图像宽度相同高度（例如：宽度应为100）