title: Horizontal two-line css menu issue
body: <p>I am trying to create a horizontal menu with CSS with ul, li elements. The goal is to accomplish the following: whenever the menu option is too long, the text goes to second line, vertically and horizontally aligned. </p>
  
  <p>I managed to make that work, however when the option is two-lined, it automatically get the max-width parameter as its width, and doesn't set to option's actual width. However, when the option is one line -- it does set to its actual width. Is max-width a wrong parameter for what I am trying to achieve? I <em>do</em> want the li element to be the same width as its contents.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="trials"&gt;
     &lt;li&gt;&lt;span&gt;&lt;a href="#"&gt;kitchen furniture&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
     &lt;li&gt;&lt;span&gt;&lt;a href="#"&gt;wardrobes &amp; cabinets&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
     &lt;li&gt;&lt;span&gt;&lt;a href="#"&gt;hallway furniture&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
     &lt;li&gt;&lt;span&gt;&lt;a href="#"&gt;materials&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.trials {
       margin: 0;
       padding: 0;
       text-transform: uppercase;
       float: right;
  }
  .trials li {
       display: inline-block;
       list-style: none;
       margin-left: 10px;
  }
  .trials li {
       max-width: 130px; 
       line-height: 40px;
       height: 40px;
       border: 1px blue solid;        
  }
  .trials li span {
       display: -moz-inline-box; /* FF2 or lower */
       display: inline-block; /* FF3, Opera, Safari */
       line-height: normal;
       vertical-align: middle;
       text-align: center;
  }
  .trials li span { 
       *display  : inline; /* haslayout for IE6/7 */
  }
  </code></pre>
  
  <p>Here's the fiddle: <a href="http://jsfiddle.net/so_artistic/ecCM4/" rel="nofollow">http://jsfiddle.net/so_artistic/ecCM4/</a></p>
  
  <p>Help would be much appreciated.</p>