Html 使用CSS中的精灵以水平UL LI显示图像
它们本身并不邪恶；然而，要想让它们在一个安全的环境中工作是很困难的。更进一步，尝试使此Html 使用CSS中的精灵以水平UL LI显示图像,html,css,css-sprites,Html,Css,Css Sprites,它们本身并不邪恶；然而，要想让它们在一个安全的环境中工作是很困难的。更进一步，尝试使此无序列表水平显示（工作示例 似乎每次我做了一些工作，我都会做最小的编辑来为我的应用程序定制它，然后它就坏了 CSS文件中声明的顺序项是否重要？ 标签必须在标签之前定义吗 在宽度：之前是否需要指定高度：？（我通常会尝试按字母顺序列出东西，这样就不会意外地重复） 以下是我用作精灵的图像： 我的目标： 将菜单水平放置在页面中央 具有完整的图像显示（全部50像素） 禁用a.hover对活动项目的效果（链接1）
无序列表- CSS文件中声明的顺序项是否重要？
标签必须在
标签之前定义吗- 在
之前是否需要指定宽度：
？（我通常会尝试按字母顺序列出东西，这样就不会意外地重复）高度：
- 将菜单水平放置在页面中央
- 具有完整的图像显示（全部50像素）
- 禁用
对活动项目的效果（链接1）a.hover
#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;
}
<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>
参考：精灵（宽：192，高：150）：
有人能告诉我如何让这个疯狂的东西工作吗？如果你想让它看起来像这样：，那么我就是这么做的：
- 结合您的
和#nav
规则，因为它们指的是同一事物#nav ul - 在这条规则中，我添加了
和margin:0auto；
以使项目居中width:600px； - 然后在
上，我添加了#nava
和显示：block；
，允许链接占据适当的高度高度：50px； - 最后，我添加了一条规则，
，它只影响活动元素，因此看起来不会改变#nav.active:hover
要回答您关于CSS规则顺序是否重要的一个问题，答案是肯定和否定。关于规则中的宽度和高度，顺序是不相关的，但规则出现的顺序可能很重要，规则的特殊性也很重要。像这样？是的！Gawd！为什么这么难？我将发布一个答案和解释。ie7不喜欢没有UL.UniAvenger的LI——你指的是CSS吗？好的，有一些评论。1）
vertical align:middle似乎什么也不做。文本不在50px高图像区域的中心。说IE7不喜欢LI w/o UL，所以我在IE9中尝试了这一点（而不是Chrome），直到我添加了alt
标记，我的图像才显示出来。垂直对齐只对内联级元素有效，而不是块级。是的，没有UL（或OL）父元素的LI元素无效。