How can I constrain a <ul>'s width to the width of the widest item?

Question

Given the following markup:

<ul>
   <li>apple</li>
   <li class="highlight">orange</li>
   <li>pear</li>
</ul>

Both the uls and the lis widths appear to be 100%. If I apply a background-color to the list item, the highlight stretches the full width of the page.

I only want the background highlight to stretch as wide as the widest item (with maybe some padding). How do I constrain the lis (or perhaps the uls) width to the width of the widest item?

Answer 1

Adding ul {float: left; } style will force your list into preferred width, which is what you want.

Problem is, you should make sure next element goes below the list, as it did before. Clearing should take care of that.