Auto fit width of li to text?

Question

Is there anyway possible to auto fit the width of an <li> tag to the width of the text it contains using CSS?

I'm designing a website that uses a custom CMS (and I don't have access to the code), so I'm limited in options as far as design goes.

Javascript solutions that would work on an <li> tag without having to edit any of the list properties directly would work as well.

Answer 1

The <li> is a block-level element, so defaults to be as wide as it can be.

To get it to "shrinkwrap" to the size of the contents, try floating it:

li {
    float:left;
    clear:left;
}

That may do what you are looking for.

Answer 2

On standard compliant browsers, use min-width instead of width. On IE 6, width does what you describe.

Answer 3

If have the id of the <li> tag you could use JavaScript to get how many characters there were and then multiply that by the font size, then set the li width to that number.

Answer 4

As @willoller already said, the li element is a block level element, but apart from floating it, you can also use:

li {
    display: inline;
}

Answer 5

You can use em's rather than pixels to specify the width of your element. An em is roughly equivalent to the width of the letter "m" in the default font. Play with multiples of the number of characters in your li until you have an em width that is visualy appealing.