Ich stehe derzeit vor einem interessanten CSS-Problem, für das ich im Web nichts gefunden habe. Ich weiß, es muss lösbar sein, vielleicht knackt ihr die Nuss .. (?)

Folgendes Problem: Ich muss einige Symbole vor einem Bild unten links anzeigen. Da die Anzahl der Symbole variieren kann, werden die Symbole nebeneinander verschoben (maximal drei pro Zeile - definiert durch die Breiteigenschaften).

Hier ist mein HTML-Code (der Div mit den Symbolen ist absolut über einem Bild positioniert):

<div class="labels">
<ul>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
</ul>

Und das zugehörige CSS:

.labels { position: absolute; bottom: 20px; left: 5px; z-index: 50; }
.labels ul { display: block; min-height: 20px; overflow: auto; width:210px; }
.labels ul li { float: left; list-style-type: none; margin: 0 5px 3px 0; }

Um dir ein Bild zu machen, wie es aussieht und was das Ziel ist, habe ich es für dich aufgemotzt: siehe hier (ich darf keine Bilder hochladen ..):Link Tex

Wie Sie sehen können, werden die Symbole nach links verschoben, beginnen aber offensichtlich oben. Das ist nicht schön, denn ich möchte, dass die schwebende Art der Umkehrung von links unten beginnt, die Breite des ul-Elements ausfüllt und die Schwebung in der nächsten Reihe nach oben fortsetzt.

Eine Idee, wie man das löst? Jede Hilfe wird sehr geschätzt !!