title: CSS: How to create a <li> with 100% width
body: <p>I can't get my horizontal <code>&lt;ul&gt;</code> Tab-List working the way I want. The <code>&lt;li&gt;</code> with the <code>class ltab</code> should fill 100% of the available space.</p>
  
  <pre><code>&lt;style&gt;
    ul.tabs{
      width:100%;
      display: table;
      white-space: nowrap;
    }
  
    ul.tabs li{
      float:left;
      white-space:nowrap;
      display:inline-block;
      font-weight: bold;
      padding:4px 8px;
      text-align:center;
      font-size:12px;
      margin-right:4px;
      border:1px;
    }
  
    ul.tabs li.ltab{
      white-space:nowrap;
    }     
  &lt;/style&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="tabs"&gt;
    &lt;li&gt;&lt;a href='#'&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href='#'&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ltab"&gt;&amp;nbsp;&lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>
  
  <p>Adding <code>width:100%</code> to the <code>ul.tabs li.ltab</code> causing this tab moving to the next line. Any ideas how to solve this?</p>