Mera liststrul i CSS...

Jag har en CSS-definition som ser ut så här:

li, ul, ol { 
  margin: 5px;
  padding: 5px;
}

Men jag vill att li-elementen ska vara indragna i förhållande till själva listan. Så då försökte jag skriva:

ul, ol { 
  margin: 5px;
  padding: 5px;
}

li {
 margin: 10px;
}

Men det ser precis likadant ut! :q Varför? Hur borde jag skriva?

Och vad skriver jag för att få en osorterad lista att sätta ut någon form av punkt eller * före innehållet?

list-style-position: inside;
list-style-type: disc;

Förmodligen för att du inte angett padding på li, så du har gått från att ha 5px padding + 5px margin till 0 padding och 10px margin. "Indraget" blir alltså fortfarande 10px. Det är bara öka på mer tills det ser bra ut...

Egentligen skulle jag gärna markerat båda, men det är ju svårt... Tack till er båda i alla fall! :D

Jaha ja... hellre än att börja om igen så fortsätter jag...

När mina punkter blir längre än en rad så börjar de om ute i vänsterkanten under punkten, jag vill att punktens text ska ha rak vänsterkant med hängande indrag, alltså:

//Så här blir det:
* Min långa kommentar som
är för lång

//Så här vill jag ha det:
* Min långa kommentar som
  är för lång

I min gamla CSS där inga padding eller margin är givna, funkar det enligt det nedre, snygga sättet, med automatik. (I alla fall i IE.) Men nog måste jag kunna åstadkomma samma sak med vilje? Hur? :q

Relevant del av befintlig (ny) CSS:

ul, ol {
  margin: 5px;
  padding: 5px;
}

li {
  margin: 5px;
  padding: 5px;
  list-style-position: inside;
  list-style-type: disc;
}

Ta bort list-style-position: inside;.

ul{ width: 100px; margin: 5px;
  padding-left: 15px;   }
	li { list-style: circle; margin:5px; 
}

Kopierade jag från en av mina listor.

zcorpan skrev:

Ta bort list-style-position: inside;.

Det här blir nästan som jag vill. Men själva punkten hamnar nu i marginalen, jag vill ju att listan ska ha samma lediga marginal som allt annat, alltså ska punkten ha rak vänsterkant mot annan text - eller som i defaultläget, vara innanför annan text.

//Enl ovanstående förslag:
  Min lista:
*   Min långa kommentar som
    är för lång

//Så vill jag ha det:
Min lista:
* Min långa kommentar som
  är för lång

//Eller (om ovanstående inte funkar):
Min lista:
   * Min långa kommentar som
     är för lång

tanten - ditt förslag fungerar inte alls? Dels påverkas även menyns lista som plötsligt inte längre blir horisontell, dels blir den avsedda listan helskum, minst sagt...

Bifogar tre utsnitt:
oldCSS - så ser det ut när inga marginaler/padding satts
newCSS - så ser det ut med zcorpans förslag
tanten - så ser det ut med tantens förslag (förutom att även menyn ballar ur)

Menyn?
Som jag skrev så var mitt förslag en klipp och klistra grej från en annan sak.
Men skriv in listan i en div. och skriv i css #din div ul...#dindiv li Gör den så bred du vill ha den, inte 100px som jag hade. Mina ringar ser ju ut att komma rätt för övrigt (under By.)

tanten skrev:

Menyn?
Som jag skrev så var mitt förslag en klipp och klistra grej från en annan sak.
Men skriv in listan i en div. och skriv i css #din div ul...#dindiv li Gör den så bred du vill ha den, inte 100px som jag hade. Mina ringar ser ju ut att komma rätt för övrigt (under By.)

Alltså ibland undrar jag hur jag läser... Jag trodde det stod 100% så jag förstod inte varför den blev smal! :OO :r

Och inte vet jag varför menyn strulade heller... nu funkar det i alla fall! Tack alla!

ul, ol {
  margin: 5px;
  padding-left: 15px;
}

li {
  margin: 5px;
  padding: 5px;
  list-style-type: disc;
}