Использование IMG в списке меню навигации UL LI

Question

Я хотел бы иметь список меню, используемый при навигации по веб-сайту, где некоторые пункты меню содержат текст и изображение справа от текста:

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

Мне бы хотелосьпункты меню, содержащие изображение Текст [пробел] Изображение в правильном горизонтальном выравнивании.

Может кто-нибудь помочь, показывая мне CSS, который бы достиг этого?

Answer 1

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

Answer 2

Я бы соблазнился, так как это навигация, чтобы обернуть все это в якорь и классифицировать его для определенного изображения в качестве фона для этого классифицированного якоря.

Answer 3

Это то, о чем ты говоришь?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;
}