Textformatierung zur Einrückung

[TS]

Hello,

Vermutlich führt dieser Teil zum Erfolg:

  .datalist         { padding: 0; margin: 0; }
  .datalist li      { padding-left: 40px; text-indent: -40px; }
  .datalist li > *  { text-indent: 0; }

Aber an der genauen Umsetzung hapert es.

Ja, die Richtung und Orientierung stimmen schon, nur die Schrittweite noch nicht ;-))

Die List-Items selber gehören ja immer zu einer Liste (ol, ul). Und diese werden dann eingerückt.

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>

    <ul>
        <li> a </li>
        <li> b </li>
        <li> c </li>
    </ul>
</ul>

Nun kannst Du die <ul>s nach und nach mit einem eigenen Einzug versehen.

Dabei handelt es sich aber um keinen Kindselektor, denn das zweite <ul> ist ka ein Kind eines <li>, sondern um einen Nachfahrenselektor.

ul ul {
    text-indent: 2em;
}

ul ul ul {
    text-indent: 4em;
}

könnte also zum Erfolg führen.
Die echten™ CSS-Schlauberger hier haben bestimmt noch bessere Ideen auf der Pfanne ;-)

Liebe Grüße
Tom S.