justified and flexible list elements

A list of elements in a horizontal line with a justified layout.

by Tfranz

HTML

<ul>
   <li>flexible number</li>
   <li>and length of</li>
   <li>list items:</li>
    <li>Add more!</li>
    <li>X</li>
    <li>Y</li>
   <li>hidden</li>
</ul>

<ul><li>flexible number</li><li>and length of</li><li>list items:</li><li>Add more!</li><li>X</li><li>Y</li><li>hidden</li></ul>

CSS

ul {
    height: 1em;
    text-align: justify;
    overflow: hidden;
    padding-left: 0;
    width:100%;
    border: 1px solid black;
}
li {display: inline-block;}
li:last-child {padding-left: 100%;}