<p>Given the following markup:</p>

<pre><code>&lt;ul&gt;
   &lt;li&gt;apple&lt;/li&gt;
   &lt;li class="highlight"&gt;orange&lt;/li&gt;
   &lt;li&gt;pear&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Both the <code>ul</code>s and the <code>li</code>s widths appear to be 100%. If I apply a <code>background-color</code> to the list item, the highlight stretches the full width of the page.</p>

<p>I only want the background highlight to stretch as wide as the widest item (with maybe some padding). How do I constrain the <code>li</code>s (or perhaps the <code>ul</code>s) width to the width of the widest item?</p>

Can you do it like this?
```
```
<ul>
   <li>apple</li>
   <li><span class="highlight">orange</span></li>
   <li>pear</li>
</ul>
```
```