How to make line break in ul horizontal list for every x list?

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

How about just -

li {
  width: 33%;
  float: left;
  list-style: none;
}

Setting the width of each li element to one third of the available space means we can fit three floated li's on every line, before the browser pushes the next one onto a new line.

I guess you could probably swap the float: left statement for display: inline to get the same effect.