LI 中的 CSS Sprite 对齐，其中图像应位于右侧

Question

我似乎无法让 Sprite 在 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 - 将 sprite-background 放在 li 或 a 元素上，但表现几乎相同。 更改 li 的填充(一个经常阅读的解决方案)会弄乱我的 -Link，它应该保留在这个位置。

那么解决这个问题的正确方法是什么？当然，我可以修改 sprite 并添加一个巨大的透明空间，但这并不是真正的方法，因为我的 sprite 包括整个 glyphiconset(400 多个图标 + 此外所有图标都以较暗的色调显示)。

谢谢!

Answer 1

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

如果要使用额外的元素，我一般使用span。将其设置为 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;
}