I have a long list of li's.

<ul>
  <li>
   <img src="test.jpg">
  </li>
  <li>
   <img src="test.jpg">
  </li>
  //etc

Each li has this styling:

width: 10%;
display: inline-block;
vertical-align: middle;

When I get to more than 10 li's in a row, they go on to the next row.

Is this the correct way to do it? or should I wrap each 10 li's into something that breaks the line? What the best/correct method? i intialy chose this method as it would be easily to loop out data from a database.