title: How can I constrain a <ul>'s width to the width of the widest item?
body: <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>