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.

If you want the <li>s to sit alongside each other you can try:

ul {
    clear: left;  /* I like to put the clear on the <ul> */
}
li {
    float: left;
}

OR

li {
    display: inline
}

Making it inline takes away its block-level status, so it acts like a <span> or any other inline element.