Nästlade listor - igen

4 svar · 783 visningar · startad av silfver 29 mars 2012

silfverMedlem sedan apr. 200312 679 inlägg

Frågan29 mars 2012 09:50#1

Hej på er webnötar! Haha.

Jag har problem med nästlade listor igen. Kanske är det samma problem som sist?

Om ni kikar på min kod:
http://jsbin.com/iritep/2/edit

Om jag nu lägger till ytterligare en nästlad lista så kommer ju inte den få någon indentering (listan i rött) eftersom det inte är någon satt.

Kan man göra denna kod dynamisk?

  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;}   /* vill inte behöva fortsätta skriva! */

Hoppas ni är med på vad jag försöker säga. :)

voigtann1Medlem sedan juni 20019 519 inlägg

29 mars 2012 11:17#2

lägg en div eller annat block element mellan a och ul inne i li listan och sätt en padding-left: 20px på den på alla dina noder.

silfverMedlem sedan apr. 200312 679 inlägg

29 mars 2012 12:05#3

voigtann1 skrev:

lägg en div eller annat block element mellan a och ul inne i li listan och sätt en padding-left: 20px på den på alla dina noder.

Jag antar att du menar så här? http://jsbin.com/iritep/4/edit
Har prövat detta tidigare. Problemet är nu att mina borders inte längre går hela vägen ut i vänsterkanten.

voigtann1Medlem sedan juni 20019 519 inlägg

29 mars 2012 12:17#4

tror du få lösa det med JS eller som Danne V brukar tipsar om: kör det som en bakgrundsbild.

jquery exempel: http://jsbin.com/iritep/5/edit

silfverMedlem sedan apr. 200312 679 inlägg

29 mars 2012 13:02#5

voigtann1 skrev:

tror du få lösa det med JS eller som Danne V brukar tipsar om: kör det som en bakgrundsbild.

jquery exempel: http://jsbin.com/iritep/5/edit

Äter du kod till frukost? Ser hur vackert ut som helst. Tack! :bire