organizing some content with ul (to look grid-like)

Question

Hey guys, i need to display all 27 states from brazil in a selection div, I really need to do it using UL.. this is a projection of how they should look:

And this is a piece of the UL: What would you suggest? can i do that using this markup?

<ul class="ufLista">
                <li>
                    <ul>
                        <li><a href="#" title="AC">AC</a></li>
                        <li><a href="#" title="AL">AL</a></li>
                        <li><a href="#" title="AM">AM</a></li>
                     </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="#" title="CE">CE</a></li>
                        <li><a href="#" title="DF">DF</a></li>
                        <li><a href="#" title="ES">ES</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="#" title="MT">MT</a></li>
                        <li><a href="#" title="MS">MS</a></li>
                        <li><a href="#" title="MG">MG</a></li>
                    </ul>
                </li>
             </ul>

Answer 1

Since the image is missing, I can only guess, but "grid-like" in the title suggests some kind of table layout. You can set the CSS display property to certain values which then should trigger table-like display:

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption

These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

This is described in more detail at The CSS Table Model.

Answer 2

Is having those lists nested a necessity? If it was just one list like:

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>Four</li>
<li>five</li>
<li>six</li>
<li>seven</li></ul>

Then you could style it with:

ul { width: 300px; list-style: none; line-height: normal; }
li { float: left; width: 98px; border: 1px black solid; }

and get a 'grid' effect pretty easily.

Answer 3

To organize data in a grid-like manner, instead of making elements behave like tables, use <table>. That's what it was invented for, and it still is the right solution.

Edit: As you need to do it with LIs: It should be no problem to present your markup in a table like manner. Give the inner <ul> a width: 100%, clear: both and overflow: auto. Give the inner <li>s float: left and either a relative or absolute width that amount to 100% of the ul.