How to make all li elements in ul be the same size as the largest element without setting a fixed size?

Question

I have a list of categories on the page, each of which has a nested list of subcategories. The style of the category list item organizes the items in a grid (through display:inline; float:left), and the subcategories appear below in the normal list layout. Categories and subcategories are user-configured, although I do not expect there will be hundreds (probably no more than 10 or 20 subcategories for each of 3 or 4 categories).

I would prefer not to set a fixed size for each list item. I would like to draw a border around each item, but I don’t like how it looks when each size of the list item is based on its content. Is there any way around this without setting a fixed size in the list items?

Answer 1

You cannot use css, you will need to use javascript.

Answer 2

Setting seems ulto float: lefthelp.

Example: http://jsbin.com/uluke

Answer 3

, .

<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>

- , . , , . "Float: left" , "display: inline" .

Answer 4

: inline float: left - . , . ( ie6 , : )

Answer 5

, min-width, , . .

, , . 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>

Answer 6

, , , . IE- , .

Answer 7

, :

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>