Question

Image Sprites，他们自己并不邪恶;然而，试图让这些工作在unordered list很困难。更进一步，试图让unordered list显示水平（工作示例>> HERE <<）肯定是一个谜。

这是我的jsFiddle项目：jsFiddle: hNJmD

似乎每当我得到一些工作时，我会进行最小的编辑，为我的应用程序自定义它，然后它会中断。

宣布CSS文件中的订单项是否重要？
是否必须在<ul>代码之前定义<li>代码？
height:之前是否需要指定width:？（我通常会尝试按字母顺序列出内容，因此我不会意外地重复这些内容）

这是我用作我的精灵的图像：

Sprite

我的目标：

将菜单水平居中于页面
拥有完整图像显示（全部50像素）
停用有效项目的a.hover效果（ Link 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>

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

Answer 1

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

合并了#nav和#nav ul规则，因为它们指的是相同的内容。
根据该规则，我添加了以项目为中心的margin:0 auto;和width:600px;
然后在#nav a上添加了display: block;和height:50px;，这样就可以让链接占据适当的高度。
最后，我添加了一条规则，#nav .active:hover只影响活动元素，因此它似乎没有变化。

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

在CSS中使用Sprite在水平UL LI中显示图像

1 个答案: