Flytande <li>

Hej,

jag vet inte om rubriken är den mest lämpade, men eftersom jag inte vet vad jag ska kalla det kan jag inte heller söka efter lösningar (om det nu finns några).

Hur som helst, det är så att jag har en lång lista:

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>J</li>
  <li>K</li>
  <li>L</li>
  <li>M</li>
</ul>

Problemet är att jag istället för att visa det på detta sätt skulle vilja att det delades upp så det visuella resultatet blev samma som om det skulle stått:

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>
<ul>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>J</li>
</ul>
<ul>
  <li>K</li>
  <li>L</li>
  <li>M</li>
</ul>

Det stora problemet är att listan ser olika ut, resultat från en databas, så ibland kanske det bara är punkterna A och B, och ibland A-G eller likande. Antar att man kan lösa det med en dubbel-loop, med förslagsvis JavaScript men i första hand undrar jag om det är möjligt att åstadkomma med enbart CSS? Går inte det ser jag gärna en diskussion om alternativa lösningar.

Tacksam för svar

Det behöver väl inte vara mer komplicerat än att sätta margin-top till något lämpligt värde på t.ex. F och K, alternativt stoppa in en tom li med list-style-type:none på lämpliga ställen?

Om du loopar ut det från en databas, med t.ex PHP? Så antar jag att du har några kriterier för när det ska bli en ny <ul> lista?

I så fall kan du väl bara stoppa in en if-sats i loopen t.ex

echo '<ul>';

loop...

if($something == $somethingelse) {
echo '</ul><ul>';
}

end loop....

echo '</ul>';

ejick skrev:

i första hand undrar jag om det är möjligt att åstadkomma med enbart CSS?

Hmm...
Rent teoretiskt går det med

<style type="text/css">
li:nth-child(5n) {margin-bottom: 1em;}
</style>

http://www.w3.org/TR/css3-selectors/#nth-child-pseudo - men det är alltså CSS3 och därmed "bleeding edge" (dvs mycket fläckvist stöd än så länge, men kolla t.ex. i en nyare Opera så ser du hur det är tänkt)

... annars finns ju nth-child i t.x. JQuery också om du kan tänka dig att köra en scriptlösning i webbläsaren

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("ul li:nth-child(5n)").attr('style', 'margin-bottom: 1em;');
  });
</script>

http://docs.jquery.com/Selectors/nthChild

Tack för alla svar!

Jag har hittat: http://articles.techrepublic.com.com/5100-10878_11-5810687.html exempel: http://www.meadhra.com/CNET/041201/FigureA.html

Vilket passar det jag vill uppnå. Skulle vara intressant och veta supporten för denna lösning. Har provat i IE 6 och 7 samt FF 3.