Frage Listentext bündig neben Float-Container

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

NetAktiv

Senior HTML'ler
23 April 2011
1.076
31
48
Freising bei München
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

HTML:
<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>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.491
295
83
66
Das liegt daran, dass Du list-style-position: inside; verwendest. Nimmst Du statt dessen outside, wird es wie gewünscht angezeigt. outside ist auch default, d. h. Du kannst es ebenso weg lassen.
Edit: Wie ich sehe, rutschen dann die Listenpunkte nach links in den Bildcontainer, wenn man diesen floatet. War wohl nichts :frown:
 
Zuletzt bearbeitet:

NetAktiv

Senior HTML'ler
23 April 2011
1.076
31
48
Freising bei München
Wie ich sehe, rutschen dann die Listenpunkte nach links in den Bildcontainer, wenn man diesen floatet. War wohl nichts :frown:
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.491
295
83
66
So ähnlich habe ich es dann auch gelöst:
Code:
    <div style='width:800px; background:yellow;'>
        <div id="bild-platzhalter" style='width:300px; height:300px; margin-right:10px; background:blue; float: left;'>
            <img src="https://via.placeholder.com/300">
        </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>
        <div class="listitem">
            &bull;<div>
                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
            </div>
        </div>
        <div class="listitem">
            &bull;<div>
                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
            </div>
        </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
            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
            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
            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
            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
            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
            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
            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
            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
            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>
    <style>
        .listitem {
            display: flex;
            align-items: top;
        }

        .listitem>div {
            margin-left: 0.5em;
        }
    </style>
Funktioniert soweit. Möchtest Du, dass auch der Inhalt eines Listenpunktes gefloatet wird, d. h. dass der Text nach links springt? Das würde ich nicht empfehlen, weil dadurch die Listenstruktur zerstört wird.
 

NetAktiv

Senior HTML'ler
23 April 2011
1.076
31
48
Freising bei München
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

Senior HTML'ler
23 April 2011
1.076
31
48
Freising bei München
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
CSS:
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
 
  • Like
Reactions: Sempervivum
Werbung:

Latest posts