Justified horizontal list with minified HTML - html

Question

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

Answer 1

Check out the jsFiddle below - you should be able to use % widths and floats to do this without padding or margins. Standard minification should not affect the results.
http://jsfiddle.net/MNally/CWjMz/
HTML:
<div id="container">
<ul id="the-list">
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
CSS:
div#container {
width:100%;
padding:0;
margin:0;
}
ul#the-list {
width:100%;
text-align:center;
}
li {
float:left;
display:inline;
padding:0;
margin:0;
background:#c9c;
width:33.333%;
}
I set the margin/padding to '0' to illustrate that they're not needed. You can remove these lines.

Answer 2

How about using display:table; and display:table-cell; ?
See here: http://jsfiddle.net/HpP99/2/

Answer 3

I ran into the same exact problem. HTML minification removes whitespaces as we all know, but in this case it breaks the CSS "text-align: justify" and "text-align-last: justify".
The solution is to implement a single line jQuery code to add white spaces back after the closing tags for the list items:
$('#the_list li').after(" ");
I hope someone finds this helpful.