0

Image Sprites本身并不邪恶。然而，试图让这些在无序列表中工作是困难的。更进一步并试图让它水平unordered list显示（工作示例>> HERE <<）当然是一个谜。

这是我的 jsFiddle 项目：jsFiddle: hNJmD

似乎每次我得到一些工作时，我都会进行最小的编辑来为我的应用程序定制它并且它会中断。

  • 声明 CSS 文件中的哪些订单项是否重要？
  • 是否必须在标签<ul>之前定义<li>标签？
  • height:之前需要指定吗width:？（我通常会尝试按字母顺序列出内容，以免意外重复）

这是我用作 Sprite 的图像：

雪碧

我的目标：

  • 将菜单水平居中页面
  • 拥有完整的图像显示（全部 50 像素）
  • 禁用活动项目的a.hover效果（链接 1）

CSS是：

#nav {
  text-shadow: 4px 4px 8px #696969;
  white-space:nowrap;
  vertical-align: middle;
}
#nav ul {
  list-style-type:none; /* removes the bullet from the list */
}
#nav li {
  display: inline-block;
  text-align: center;
  height: 50px;
  width: 192px;    
}
#nav a {
  background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
  display: block;
  color:Blue;
}
#nav a:hover {
  background-position: 0 -50px;
  color:Red;
}
#nav .active, a:hover {
  background-position: 0 0;        
  color:Black;
}
#nav span {
  top: 15px;
  padding-left: 5px;
}
​

jsFiddle 中使用的 HTML 也在这里重复：

<body>
  <div>
    <ul id="nav">
      <li>
        <a class="active" href="#">
          <span>Link 1</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>Link 2</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>Link 3</span>
        </a>
      </li>
    </ul>
  </div>
<br/>
<br/>
<br/>
<br/>
<div style="text-align:center;">
  <p>REFERENCE: Sprite (Width: 192, Height: 150):</p>
  <img src="http://i.imgur.com/Sp7jc.gif">
</div>
</body>​

有人可以告诉我如何让这个疯狂的东西发挥作用吗？

4

1 回答 1

1

如果您希望它看起来像这样：jsFiddle example，那么这就是我所做的：

  • 结合你的#nav和#nav ul规则，因为它们指的是同一件事。
  • 我添加的那个规则margin:0 auto;和width:600px;哪个居中的项目
  • 然后#nav a我添加了它display: block;，height:50px;它允许链接占据适当的高度。
  • 最后我添加了一条规则，#nav .active:hover它只影响活动元素，因此它似乎不会改变。

要回答您关于 CSS 规则的顺序是否重要的​​问题之一，答案是肯定的和否定的。关于规则中的宽度和高度，顺序无关紧要，但规则出现的顺序很重要，规则的特殊性也很重要。

于 2012-09-20T21:05:06.547 回答