title: How to create a horizontal UL which shows 3 items per line?
body: <p>I'm trying to create a horizontal UL which always shows 3 items per line. The tricky part is that the items can be of varying widths. For example:</p>
  
  <pre><code>&lt;ul class="items"&gt;
    &lt;li&gt;
     &lt;input type="checkbox" id="work" /&gt;
      Work items
     &lt;/li&gt;
    &lt;li&gt;
     &lt;input type="checkbox" id="shopping" /&gt; 
      Shopping
      &lt;/li&gt;
    &lt;li&gt;
     &lt;input type="checkbox" id="financial" /&gt;
      Financial Information &amp; Tips
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>etc.</p>
  
  <p>I want to do it so its essentially like using a table, where it always shows 3 items per line, and the checkbox of each item is always on the same line as its text.</p>
  
  <p>How can I do it?</p>
  
  <p>Here's the current code I'm using, but it doesn't show the items evenly, often the last checkbox ends up on line 1 and the text is pushed to the next line.</p>
  
  <pre><code>ul.items
  {
    text-align: center; 
    list-style-type: none;  
    width: 400px;
  }
  
  ul.items li
  {
      display: inline;     
  }
  </code></pre>