Justified horizontal list with minified 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/

possible duplicate of [how to maximize the list to consume max space using css](http://stackoverflow.com/questions/24629444/how-to-maximize-the-list-to-consume-max-space-using-css) — Paulie_D, Jul 16 '14 at 13:18
This duplicate shows a list with **another design**. I need a list of elements which looks like "text-align:justify". — tFranz, Jul 17 '14 at 08:41

score 0 · Answer 1 · answered Jul 16 '14 at 16:38

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.

Thank you for your answer, but i need another design and behavior of the list. Please have a look at http://jsfiddle.net/Tfranz/HpP99/ — tFranz, Jul 17 '14 at 08:43

score 0 · Answer 2 · answered Jul 17 '14 at 08:56

0

How about using display:table; and display:table-cell; ?

See here: http://jsfiddle.net/HpP99/2/

answered Jul 17 '14 at 08:56

HaukurHaf

13,522
5
44
59

Unfortunately it is not the same. Have a look at the last item: with "display:table" there is space after the last item, it is not like "text-align:justify" with **no space on the right side**. – tFranz Jul 17 '14 at 09:28

score 0 · Answer 3 · answered Nov 13 '19 at 21:50

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("&#32;");

I hope someone finds this helpful.

Justified horizontal list with minified HTML

3 Answers3