Menü horizontal ausrichten

[heinetz]

Hallo Forum,

ich möchte eine unsortierte Liste horizontal so ausrichten, dass sie sich über die gesamte Breite des Viewports erstreckt. Der Abstand der Listenpunkte zwischeneinander soll dabei gleich sein. Mein erster Ansatz sah im Prinzip so aus:

http://jsfiddle.net/2kRJv/

• die ul wird mit text-align: justify; versehen
• dazu muss die mit Hilfe eines unsichtbaren Listenelements auf zwei Zeilen ausgedehnt werden

Diese reine CSS-Lösung funktioniert schon sehr gut, hat nur einen Haken:

Der erste und der letzte (sichtbare) Listenpunkt "klebt" am Rand. Nun kann ich das natürlich durch einen fixen Abstand der ul zu ihrem Container verhindern aber das entspricht nicht der Aufgabenstellung.

Meine JS-Lösung funktioniert so:

var sum  = 0;
$tabs    = $page.find('.fplus-tabbar li');
$.each($tabs, function(){
	var w = $(this).width();
	sum+=w;
});	
$tabs.css('padding','0 '+Math.floor(($tabs.parent().width()-sum)/($tabs.length*2))+'px');

Damit hat jedes Listenelement den selben Abstand zu dem nächsten Listenelement.

Hat jemand vielleicht eine Idee, wie sich das als reine CSS-Lösung realisieren liesse?

danke für Tipps und

beste gruesse, heinetz