1. Zuhause
  2. Frage und Antwort
  3. Verschachtelte Listen mit Einrückungen dynamischen Polsterungen

Verschachtelte Listen mit Einrückungen dynamischen Polsterungen

2012-03-29 6 views
0

Werfen Sie einen Blick auf mein Codebeispiel an js bin: http://jsbin.com/iritep/3/editVerschachtelte Listen mit Einrückungen dynamischen Polsterungen

Ich möchte die gelb gefärbte Artikel einrücken, ohne meine hart codiert CSS-Regel weiterhin:

ul li a {padding-left: 20px;} 
ul li ul li a {padding-left: 40px;} 
ul li ul li ul li a {padding-left: 60px;} 
ul li ul li ul li ul li a {padding-left: 80px;} /* don't want this line! */

Kann ich vielleicht dieses CSS dynamischer machen, ohne die letzte Zeile von CSS hinzufügen zu müssen?

Quelle

2012-03-29 dsilfver

+0

Ist es wichtig, dass der Raum auf der linken Seite jeder Link zählt als Teil der Verbindung? – thirtydot

+0

können Sie alle bis auf die erste "ul" in Ihren Selektoren weglassen. – Christoph

Antwort

0

Ändern Sie Ihre CSS-Regeln leicht, Sie Folgendes tun können:

ul li{ 
    padding-left:20px; 
}

Diese weitere jede neue Ebene 20px einrücken würde. Schau, ob dir das noch passt. (Einrückungslisten führen im Allgemeinen zu geringfügigen gestalterischen Einschränkungen (wie das Einfärben einer einzelnen Linie über li oder a Element.))

Quelle

2012-03-29 12:26:33 Christoph

+1

Ja, aber das Problem ist, dass ich die Ränder brauche, um zu den Rändern des Bildschirms zu strecken. Ich habe es so gelöst: – dsilfver

+0

Dies funktioniert immer noch nicht, wonach er sucht; Er sucht nach verschiedenen Füllmethoden, die auf der Ebene der Liste basieren. –

+0

@WilliamCallahan Nun, es tut genau diese Verschachtelungsstruktur: http://jsbin.com/mumayirufa/1/edit Das einzige, was es nicht tut (weil CSS kann dies nicht) ist die Länge der Listenelemente (die jedoch nicht in der ursprünglichen Frage enthalten war). – Christoph

Verwandte Themen

 Verwandte Themen