Frage Listentext bündig neben Float-Container

[NetAktiv]

Hallo,

ich will eine Bild mit float:left einbinden und rechts davon neben Text auch eine Liste <ul> darstellen. Leider gelingt es mir nicht, den Listentext so einzurücken, dass er untereinander beginnt. Die erste Zeile eines Listenelements ist wie gewünscht, Bull - Abstand - Text, die nächste Zeile beginnt aber linksbündig mit dem Bull, und nicht, wie gewünscht linksbündig mit dem Text der ersten Zeile.

Grüße, Rainer

<div style='width:800px; background:yellow;'>
    <div id="bild-platzhalter" style='width:300px; height:300px; margin-right:10px; background:blue; float:left'></div>           
    <p>
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    </p>
    <ul style="list-style-position: inside; background:beige;">
        <li>
            List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1
            List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1 List1
        </li>
        <li>
            List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2
            List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2 List2
        </li>
    </ul>
    <p>
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    </p>   
</div>

 

[NetAktiv]

Wie ich sehe, rutschen dann die Listenpunkte nach links in den Bildcontainer, wenn man diesen floatet. War wohl nichts

Eben, daher habe ich ja den list-style-position: inside genommen. Ich habe auch schon mit margin und padding gespielt, kam aber auch nicht weiter. In meiner Verzweiflung habe ich sogar eine Tabelle verwendet, in der ersten Spalte ein &bull;, aber das wird seltsam, wenn der Text länger wird, dann gibt es keinen vernünftigen Float mehr um das Bild, wohl weil die Tabelle ein display:block ist.

 

[NetAktiv]

Wenn sich nicht noch eine Lösung für die Liste auftut, dann werde ich das wohl auch so machen.

Möchtest Du, dass auch der Inhalt eines Listenpunktes gefloatet wird, d. h. dass der Text nach links springt?

Das muss ich noch überlegen. Meine Seite ist eigentlich so eher für einen breiten Screen gedacht. Aber wenn jemand das dann am Smartphone hochkant anschaut, wäre es eventuell sinnvoller, die Liste komplett unter das Bild zu legen oder zumindest den Break nicht innerhalb eines Listpunktes zu machen. Für den breiten Screen ist ein Umbruch wohl unnötig, so lang wird die Liste nicht.

 

[NetAktiv]

Funktioniert soweit.

Also mir reicht das nun, das ist eine Lösung, mit der ich gut leben kann, zumal man die weiter vereinfachen kann.
Ich habe noch im CSS die Zeile

listitem:before { content:"\2022"; font-weight:800; };

eingefügt, und dann spart man sich die komplexe Konstruktion mit dem &bull; im listitem, das macht dann CSS für mich.
Grüße und Danke, Rainer

 

[basti1012]

Warum packst du um das <ul> nicht einfach noch ein Container?

Listentext bündig neben Float-Container

Listentext bündig neben Float-Container Hallo, ich will eine Bild mit float:left einbinden und rechts davon neben Text auch eine Liste <ul> darstellen. Leider gelingt es mir nicht, den Listentext so einzurücken, dass er untereinander beginnt. Die erste Zeile eines Listenelements ist wie...

basti1012.bplaced.net

 

[NetAktiv]

warum packst du um das <ul> nicht einfach noch ein Container ?
https://codepen.io/basti1012/pen/bGGgoYq

Hatte ich versucht, kenne mich aber nicht so aus. Erst dein Vorschlag zeigt die richtige Lösung, die ich nicht kannte, nämlich den <ul>-Container mit CSS auf display: flex umzustellen.