title: CSS Sprite Alignment in LI where images should be on the right
body: <p>I can't seem to get the sprite to be aligned on right of the LI element</p>
  
  <pre><code>&lt;li class="menuItems"&gt;
        &lt;div style="background: #ffffff url('pixmaps/glyphicons.png') no-repeat 
  -553px -56px; height:27px;width:29px;background-position: -30px 0px;"&gt;
          &lt;a href="#"  &gt;Streams&lt;/a&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/T0Waz.png" alt="Weird alignment"></p>
  
  <p>I tried with and without the div - putting the sprite-background on the li or the a element but behaving almost the same.
  Changing the li's padding (a often read solution) would mess up my -Link, which should remain at this very position.</p>
  
  <p>So what is the proper way to solve this? Sure I could modify the sprite and add a huge transparent space, but thats not really the way to go as my sprite includes the whole glyphiconset (400+ Icons + in addition all the Icons in a darker tone for rollover).</p>
  
  <p>Thank you!</p>