Navigation horizontal gleichmäßig verteilen

[Nina]

Erstmal: Danke für die schnellen Antworten. OK, habe versucht ein bisschen aufzuräumen

<div id="wrapper">
 
   <div id="header">
   <div id="navi">
   <ul>
   <li><a href="#anker_vita"><img src="img/vita.png"/></a></li>
   <li><a href="#anker_vorträge"><img src="img/vortraege.png"/></a></li>
   <li><a href="#anker_publikationen"><img src="img/publikationen.png"/></a></li>
   <li><a href="#anker_forschung"><img src="img/forschung.png"/></a></li>
   <li><a href="#anker_lehre"><img src="img/lehre.png"/></a></li>
   <li><a href="#anker_kontakt"><img src="img/kontakt.png"/></a></li>
   <span></span>

   </ul>
   </div> <!-- end navi -->
  </div> <!-- end header -->

#wrapper    	{background: #FFF;}
#header 	{position:fixed;
	   	height: 100px;
		background-image:url(img/background_header.png);
		background-color:#FFF;}
#navi ul	{text-align:justify;
		width:50%;
		margin:auto;
		margin-top:15px;
		background-color:#9F0;}
#navi li	{display:inline-block;}

#navi li img 	{width:50px;
		height:50px;}

Nun werden die Bilder allerdings garnicht angezeigt, das war auch der Grund aus dem ich die umständliche Variante mit den extra divs gewählt hatte.

Das span-element in der Liste brauche ich um für den Blocksatz (der ja trotzdem nicht funktioniert) wenn ich das rausnehme sieht es so aus: