Bild mit Bildunterschrift in inline-Liste

[Geomaik]

Hallo Community,

ich versuche gerade mehrere Elemente der gleichen Art zu struktrieren.
Jeweils ein Bild mit einer Bildunterschrift soll in einem "Block" stehen und die Blöcke jeweils nebeneinander (solange der Platz ausreicht).

Als Tabelle war mir das zu ungelenkt, deswegen habe ich es nun als LISTE <ul> versucht. Das Prinzip habe ich in eine html ohne Schnickschnack übertragen um den Fehler zu finden... ich finde ihn aber nicht:

<ul>
<li>
<img src="Bild1.png"/>
Beschriftung Bild 1
</li>
<li>
<img src="Bild2.png"/>
Beschriftung Bild 2
</li>
</ul>

Das klappt soweit wie die <li> Elemente als display: block; notiert sind. Sie dann so aus wie auf dem Bild. (Ich habe zur Übersicht mal die <ul> rot umrahmt und die <li> blau umrahmt).

Mein Problem: Ich kriege diese Blöcke nicht nebeneinander! (display: inline)

ul {
border: 1px solid red;
display: block;
width: 100%;
}

li {
border: 1px solid blue;
display: block; <-- inline funktioniert nicht
width: 25em;
}

img {width: 18.75em;}



Auch mit einem umschließenden <figure> tag um das Image und den Text kein Erfolg:
<li>
<figure>
<img src="Bild1.png"/>
<figcaption>Beschriftung Bild 1</figcaption>
</figure>
</li>

Woran liegt es? Gibt es zur Not eine andere Lösung die Blöcke nebeneinander anzuordnen?

 

[Geomaik]

Ok, habe es jetzt doch noch gelöst ...

mittels float der Blöcke und overflow des umschließenden Rahmens.

Falls es interessiert das HTML:

<article>
<figure>
<img src="Bild1.png"/>
<figcaption>Beschriftung Bild 1</figcaption>
</figure>

<figure>
<img src="Bild2.png"/>
<figcaption>Beschriftung Bild 2</figcaption>
</figure>
</article>

Und das CSS:

figure {
border: 1px solid green;
width: 25em;
float: left;
}


article {
border: 1px solid gray;
overflow: auto;
}

So einfach... und doch so lang daran geknabbert!