Ponlo como fondo en el elemento de la lista:
<ul id="nav">
<li><a><img /></a></li>
...
<li><a><img /></a></li>
</ul>
#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;}
/* left padding creates a gap between links */
A continuación, recomiendo un marcado diferente para la accesibilidad:
lugar de incrustar las imágenes en línea, coloque el texto como texto, rodee cada uno con un intervalo, aplique la imagen como fondo y luego oculte el texto con display: none - this brinda mucha más flexibilidad de estilo y le permite usar el mosaico con una imagen bg de 1px de ancho, ahorra ancho de banda y puede incrustarlo en un sprite CSS, lo que ahorra llamadas HTTP:
HTML:
<ul id="nav">
<li><a><span>link text</span></a></li>
...
<li><a><span>link text</span></a></li>
</ul
CSS:
#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;}
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}
ACTUALIZAR
OK, veo que otros obtuvieron una respuesta similar antes que yo, y noto que John también incluye un medio para evitar que el separador aparezca antes del primer elemento, usando el selector li + li, lo que significa que cualquier li viene después de otro li.