Question

I have horizontal dynamic ul list build by PHP like this:

List1 List2 List3 List4 List5 List6 List7 List8 List9 List10

Is there a way to make new line every 3 lists? So, the result will look like this:

List1 List2 List3

List4 List5 List6

List7 List8 List9

List10

I know I can adjust the ul width to make my lists look like above.

But what I want is to make new line for every 3 lists. Is PHP, CSS, or JavaScript can do this? Anyone can help?

Answer 1

If you don’t have fixed sizes of you list items you can do it simple with jQuery:

$('li:nth-child(3n)').next().css({'clear': 'both'});

This takes every third element, and add clear to the next one. That’s way .. no matter what size is your list item it will take the next after every 3th element to new line.