Use of IMG within a UL LI navigation menu list

I would like to have a menu list, used in a website navigation, where some of the menu items contain both text and an image to the right of the text:

<ul>
  <li>Nav item 1</li>
  <li>Nav item 2 <img src="image.gif" /></li>
</ul>

I'd like the menu items containing the image to be Text开发者_开发百科[space]Image in correct horizontal alignment.

Can anyone help by showing me the CSS that would achieve this?

ul li img {
padding-left: 20px;
}

This what you're talking about? http://jsfiddle.net/brandondurham/gvqGk/

HTML

<ul>
    <li>
     This is the LI text. <img src="http://dropbox.smallparade.com/bigbubble.png" width="24" height="24">
    </li>
</ul>

CSS

ul li {
    font: 14px/24px Helvetica, Arial, sans-serif;
    white-space: nowrap;
}
ul li img {
    margin-left: 10px;
    vertical-align: middle;
}

I would be tempted as this is navigation, to wrap it all in an anchor and class it for a specific image as a background for that classed anchor.

Something like this:

<ul>
    <li><a href="" class="imagedClass">Link 1</a></li>
    <li><a href="">Link 2</a></li>
</ul>


a.imagedClass
{
    display:inline-block;
    width:200px;
    background-image:url('/images/image.png');
    padding-right:20px;/*width of image*/
}