0

我似乎无法让精灵在 LI 元素的右侧对齐

<li class="menuItems">
      <div style="background: #ffffff url('pixmaps/glyphicons.png') no-repeat 
-553px -56px; height:27px;width:29px;background-position: -30px 0px;">
        <a href="#"  >Streams</a>
    </div>
</li>

奇怪的对齐

我尝试使用和不使用 div - 将精灵背景放在 li 或 a 元素上，但行为几乎相同。更改 li 的填充（一个经常阅读的解决方案）会弄乱我的 -Link，它应该保持在这个位置。

那么解决这个问题的正确方法是什么？当然，我可以修改精灵并添加一个巨大的透明空间，但这并不是真正的方法，因为我的精灵包括整个字形图标集（400 多个图标 + 以及所有颜色较深的图标以进行翻转）。

谢谢！

4

1 回答 1

3

我本来打算将此作为评论，但实际上它更像是一个答案。

如果您想使用额外的元素，我通常使用跨度。将其设置为display: block，同时设置height和width（设置为图标的确切大小）。如果您不希望它影响布局，请将其设置为position: absolute，并将其定位，执行类似的操作right: 10px; top: 10px。如果您使用position: absolute，您还需要确保父级也设置了定位，例如position: relative.

完整示例：

.icon {
  position: absolute;
  display: block;
  width: 32px;
  height: 32px;
  top: 4px;
  right: 4px;
  background: url('pixmaps/glyphicons.png') no-repeat -553px -56px; /* set the offset to the exact position of your icon */
}

.menuItems {
  position: relative;
}
于 2013-02-13T17:01:53.370 回答