Als Blocksatz ausgerichtete UL-LI Liste

Eine sicher nicht alltägliche Aufgabe: eine LI Liste soll als Blocksatz ausgerichtet werden.

Es gibt da fast keine andere Möglichkeit, als dies mit text-align: justify zu lösen und die LI-Elemente als display: inline zu formatieren. Allerdings wird dann noch nicht auf die verfügbare Breite ausgerichtet. Justify funktioniert ja nur, wenn der Text nicht mehr in die Zeile passt.

Aus verschiedenen anderen Ansätzen entstand dann diese Lösung (das Beispiel ist in LESS notiert):

ul {

  .clearfix;

  text-align: justify;

}

li {

  display: inline;

  &:last-child:after {

    content: '';

    display: inline-block;

    height: 0;

    width: 100%;



    /* für IE6/7 */

    *display: inline;

    zoom: 1            

  }

}