CSS: How do I make a horizontal (UL) list keeping each item at a uniform width?

Question

That is, without defining a specific 'width' amount for each individual item. As in, the widest element (by its content) sets the width for each of the other elements.

Additionally, how do I span said list 100% across its container, also keeping each item the same width?

Answer 1

Use CSS. code should be:

<style>
ul li {width:200px;float:left}
ul li span {width:100%;display:block}
</style>
<ul>
  <li>
    <span>1</span>
  </li>
  <li>
    <span>2</span>
  </li>
  <li>
    <span>3</span>
  </li>
</ul>

A span is an inline element so it doesn't have height or width attributes, above I used CSS to turn it into a block.

EDIT: Oh, I see, not span the noun, span the verb...

    <style>
ul {list-style:none;width:100%}
ul li {width:25%;float:left}
</style>
<ul>
  <li>
    1
  </li>
  <li>
    2
  </li>
  <li>
    3
  </li>
  <li>
    4
  </li>
</ul>

for this, divide the width, 100%, by the number of LI elements, 4, 100/4 = 25% that's the ideal width of each LI (without margin & padding)

Answer 2

You'll need to float them for this:

ul {
  list-style: none;
}

ul li {
  float: left;
  width: 100px; /* Or whatever arbitrary amount you want */
}

The list should automatically span the width of the container - its a block element.

Answer 3

If I understand correctly:

1. You want a list.
2. You want each list item to be the same width.

3. You want that width to be the width of the widest list item's content

4. You also want a way to evenly space list items across a container, this seems incompatible with 3, because then they won't be evenly spaced by content but by container size.

So I'm assuming you want two different solutions.

I think you can do

<style>
  ul, li{float:left;margin;padding:0;display:block;}
  li {clear:left;width:100%;margin:1px 0;background:#03a;}
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2 which is longer</li>
  <li>Item 3</li>
</ul>

works in some browsers. I seem to remember it not working in IE, and having to make it work using css expressions.

The idea is that the ul and li's are floated to shrink them to their content width. The li's are cleared and set to 100% of their container width, the same container that is shrunk to their size.

--

Your other option is impossible in CSS unless you know the number of list items. Though if you don't know the number of list items it means there is scripting going on either server side or client side, and you can find out the number of items. :)

I've solved this in the past by giving the ul a class with the number of children in it, and using lots of CSS rules and hoping one sticks.

eg

<style>
  ul.lis1 li {width:100%}
  ul.lis2 li {width:50%}
  ul.lis3 li {width:33.3%}
  ul.lis4 li {width:25%}
  /* ... you can keep going forever here, though there'll be a point at which they become too thin and your UI breaks anyway, */
</style>
<ul class="lis4"> <!-- lis4 is generated by PHP or Ruby or whatever -->
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>