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

You can't with css, you'd have to use javascript.

Answer 2

The only way I know of to have several cells in a column to have the same width involves tables. IE expressions might work too, but I wouldn't recommend it.

Answer 3

Actually, it's possible.

<div style="float: left"> 
  <div style="display: block">
    <div class="cat">Category #1</div>
    <div class="sub">Sub category #1</div>
    <div class="sub">Sub category #2</div>
  </div>
  <div style="display: block">
    <div class="cat">Category #2</div>
    <div class="sub">Sub category #1</div>
    <div class="sub">Sub category #2 LONG LONG LONG</div>
  </div>
</div>

Just because of the way block elements fill to maximum size. I know it's default, just added it to make it more visible. The "float: left" isn't required, but "display: inline" would be.

Answer 4

Display: inline and float: left are not a good combination. In fact setting display on a floated element is redundant, as they automatically become block level once floated. (except for a weird ie6 bug with double margins, there is no reason to set display: on a floated element)

Answer 5

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

Example: http://jsbin.com/uluke

Answer 6

If you can change your markup, than:

ul {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    border: 1px solid black;
    margin-left: 1em;
}

li.category {
    border: none;
    margin-left: 0;
}


<ul>
    <li class='category'>Category #1</li>
    <li>Sub #A</li>
    <li>Sub #B</li>

    <li class='category'>Category #2</li>
    <li>Longer Sub #C</li>
    <li>Sub #D</li>
</ul>

Answer 7

If you know the text size of your average category item you could use min-width to set all items to this size, but allow them to grow for super large items. This could even be set programmatically on render.

Please excuse the huge example.
CSS

ul.tags {
    display:block;
    margin: 0;
    padding:0;
    width:40em;
}
ul.tags li {
    display:inline-block;
    /* 
    *  or for FF2 compat use      
    display:inline-block;
    float:left;
    */
    margin:2px;
    padding:2px;
    min-width:8em;
    border:1px solid #ddd;
    text-align:center;
}

HTML

<ul class="tags">
        <li>lorem ipsum dolor </li>
        <li>dolor sit amet</li>
        <li>consectetur adipisicing elit</li>
        <li>sed do </li>
        <li>eiusmod tempor incididunt </li>
        <li>ut labore </li>
        <li>et dolore </li>
        <li>magna </li>
        <li>aliqua</li>
        <li>ut enim </li>
        <li>ad minim veniam</li>
        <li>quis nostrud </li>
        <li>exercitation ullamco laboris </li>
        <li>nisi ut </li>
        <li>aliquip </li>
        <li>ex ea </li>
        <li>commodo </li>
        <li>consequat</li>
        <li>duis aute irure </li>
        <li>dolor in </li>
        <li>reprehenderit </li>
        <li>in voluptate </li>
        <li>velit esse </li>
        <li>cillum dolore </li>
        <li>eu fugiat nulla </li>
        <li>pariatur excepteur </li>
        <li>sint </li>
        <li>occaecat cupidatat </li>
        <li>non proident</li>
        <li>sunt in </li>
        <li>culpa qui </li>
        <li>officia deserunt </li>
        <li>mollit anim id est laborum</li>
</ul>