Når jeg koder elementer på en hjemmeside, benytter jeg html-lister over alt jeg kan komme til det!
Som web-koder elsker jeg HTML-lister!
<ul>
<li>Nam tempus, mi sed mollis dapibus Etiam eget odio ante Etiam eget odio ante.</li>
<li>Dictum nibh adipiscing. Etiam eget odio ante. Donec semper cursus nibh, cursus porttitor</li>
<li>Sed molestie tempor metus, vel luctus leo tincidunt a. Integer magna risus, rhoncus id</li>
</ul>En lille jQuery snippet er her helt uundværlig, så snart jeg skal have et ulige antal elementer til at stå ved siden af hinanden. Her er margin-right sat til "0" på hver tredje element
$('ul > li:nth-child(3n+3)').css('margin-right', 0); Man kan også sætte en class på hver tredje element så man i sit style-sheet kan sætte den ønskede margin og andre formateringer på.
$('ul > li:nth-child(3n+3)').addClass('den-tredje'); Skal det nye webdesign være i 5 spalter ....ja, så tror jeg godt du ved hvad man så skal ;-)
En elegant CSS3 løsning
En løsning som kun benytter CSS er:
ul > li:nth-child(3n+3) { margin-right: 0; }Desværre virker denne CSS3 selector ikke på Internet Explorer 8 og ned. Men på IE 9 virker det fint ... som i alle "rigtige" webbrowsere (FF, Safari, Chrome, Opera).