wrap inline li's into equal rows

[MOGmartin]

I have a variable number of LI's that are displayed inline across the page (in a navigation menu) with CSS like this:\[code\] ul.nav{ margin: 0; padding: 0; text-align: center; } ul.nav li{ margin: 0; padding: 5px 10px; list-style: none; display: inline-block; }\[/code\]When the page is made narrower, the navigation menu is wrapping as it should, however, I'd like to try and equal the number of items on each row. For example when 9 items appear, and the page only fits 8, i'd like to have 5 in the top row and 4 wrap below, rather then 8 in the top row and on lonely li move to the next row. The problem is that they have to be center aligned in this template, so it looks pretty bad with one row full and the second row with a single item.It doesn't have to be exact, so some kind of margin solution that might force down a few (6 and 3 would be better then 8 and 1) would work. Does anyone have an idea how I might do this?Cheers!