title: Justified horizontal list with minified HTML
body: <p>For a horizontal menu i want to <strong>justify the list items</strong> over the full width.</p>
  
  <p>This works:</p>
  
  <p>CSS:</p>
  
  <pre><code>ul {height: 1em;text-align: justify;overflow: hidden;padding-left: 0;}
  li {display: inline-block;}
  li:last-child {padding-left: 100%;}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;flexible number&lt;/li&gt;
      &lt;li&gt;and length of&lt;/li&gt;
      &lt;li&gt;list items&lt;/li&gt;
      &lt;li&gt;hidden&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>OUTPUT (the lines are showing the width of the UL):</p>
  
  <pre><code>|flexible number             and length of              list items|
  </code></pre>
  
  <p>If i delete all whitespaces and linebreaks to <strong>minify the HTML-output</strong>, it doesn't work any more.</p>
  
  <p>SMALLER HTML:</p>
  
  <pre><code>&lt;ul&gt;&lt;li&gt;flexible number&lt;/li&gt;&lt;li&gt;and length of&lt;/li&gt;&lt;li&gt;list items&lt;/li&gt;&lt;li&gt;hidden&lt;/li&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>It looks like this:</p>
  
  <pre><code>|flexible numberand length oflist items                           |
  </code></pre>
  
  <p>Is there any chance to <strong>get the "normal" behavior back</strong> with pure CSS?</p>
  
  <p>Please have a look at this fiddle:
  <a href="http://jsfiddle.net/Tfranz/HpP99/" rel="nofollow">http://jsfiddle.net/Tfranz/HpP99/</a></p>