How do you force all li elements in a ul to be the same size as the largest item without setting a fixed size?

Question

I have a list of categories on a page, each with a nested list of subcategories. The category list item style arranges the items in a grid pattern (via display:inline; float:left), with the subcategories showing underneath in a normal list layout. The categories and subcategories are user configured, though I don't expect there to be hundreds (probably not more than 10 or 20 subcategories for each of 3 or 4 categories).

I would rather not set a fixed sized for each list item. I would like to draw a border around each element, but I don't like how it looks when each list item size is based on it's content. Is there a way around this without setting a fixed size on the list items?

Answer 1

Setting the ul to have float: left seems to help.

Example: http://jsbin.com/uluke