0

我正在使用 CSS sprite 做一个导航菜单，而不是上传大量图像，而是将它们合并在一起，并且可以通过移动背景位置看到悬停、活动效果，即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。
“俱乐部” - 宽度：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. 如果是，这种情况下的参数应该是什么？
4

2 回答 2

0

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

于 2012-06-04T10:20:42.193 回答
0

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

#list2 { width: 120px; margin-right: 15px; }
于 2012-06-04T10:21:38.410 回答