Abstände zwischen Objekten beim Umbruch

[cdash]

Hallo,

ich wollte mal ein Problem schildern auf das ich bei der Gestaltung von Internetseiten mit CSS in den vergangenen Jahren oft gestossen bin und für das ich bisher keine saubere Lösung / Workaround gefunden habe.

Ich habe eine Anzahl von Objekten (Bilder, divs, whatever) die in einer  Reihe sind und wenn nicht mehr genung Platz ist geht es in der nächsten Reihe weiter.

Der Abstand der Objekte zum äußeren Rand ist kleiner als der Abstand Objekte untereinander (kommt ganz oft vor weil die Objekte z.B. rechts und links mit einer Spalte bündig sind).

Ich habe mal hier ein konkretes Beispiel als Layout (jpg):

Im Markup sieht das bei mir so aus:

  
    <div>  
    	<ul>  
        	<li>1</li>  
            <li>2</li>  
            <li>3</li>  
            <li>4</li>  
            <li>5</li>  
            <li>6</li>  
            <li>7</li>  
            <li>8</li>  
            <li>9</li>  
        </ul>  
        <div></div>  
    </div>  

und im CSS:

  
div {  
	background-color: #00FFFF;  
	width: 592px;  
	padding: 20px 2px 2px 2px;  
}  
div div {  
	clear: both;  
	padding: 0px 0px 0px 0px;  
}  
ul {  
	list-style: none;  
	margin: 0px;  
	padding: 0px;  
}  
li {  
	float: left;  
	width: 93px;  
	height: 52px;  
	margin: 6px 6px 0px 0px;  
	background-color:#CCFF00;  
}  

Ich habe das auch mal hier hochgeladen, damit man es sich gleich anschauen kann:
http://demo.analogeins.de/div/list_styling.html

Das Problem ist offensichtlich: das jeweils äußerste Objekte auf der rechten Seite darf rechts keine margin haben. Eigentlich würden alle Objekte in eine Reihe passen. So rutscht es schon in die nächste Reihe.

Wenn ich nur eine Reihe habe, kann ich das mit first-child lösen, aber bei mehr Objekten stehe ich da irgendwie auf dem Schlauch.

Vielen Dank

Andreas