导航精灵不显示为背景图像

Question

我想知道是否有人可以解释为什么我的导航精灵没有出现在我的链接旁边。我设置了网址和宽度，所以我不确定出了什么问题：

http://jsfiddle.net/spadez/uZzBW/11/

.nav-sprite {
 background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
    width: 30px;
}

Answer 1

Spans不是像div这样的块元素 - 它们是内联元素。所以他们基本上“崩溃”了。添加高度，宽度和显示：块将解决它。还有其他方法，但这很简单。

width: 30px; 
display:block;
height:30px;

添加到.nav-sprite会暴露精灵。我会让你定位最终的像素/高度/宽度。

查看我的前叉http://jsfiddle.net/Hs8m5/

Answer 2

假设您希望图标与链接内联，我会建议这样的事情：

.nav-sprite {
  background: url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
  width: 30px;
  height: 30px;
  display: inline-block;
}

您还可以添加vertical-align: middle;以更好地将其与文字对齐。