evenly distribute li items

CSS:

ul{
    text-align: justify;
}

ul::after {
    content: '';
    width: 100%; 
    display: inline-block;
}

li{
    display:inline-block;
}

Here is one way of doing it using text-align: justify.

The advantage of this approach is that the circle/bubble motifs are evenly spaced and you can also control the justification of the labels beneath then.

You first need to wrap the labels in a container, I used a <p> tag, and add a terminating <li> element, equivalent to the clearing element.

<ul class="steps">
    <li class="step1 first">
        <div class="icon basket"></div>
        <p>1.Warenkorb</p>
    </li>
    <li class="step2">
        <div class="icon registration"></div>
        <p>2.Adresse</p>
    </li>
    <li class="step3">
        <div class="icon payment"></div>
        <p>3.Zahlungsart</p>
    </li>
    <li class="step4">
        <div class="icon order"></div>
        <p>4.Bestätigen</p>
    </li>
    <li class="step5 last">
        <div class="icon thankyou last"></div>
        <p>5.Danke</p>
    </li>
    <li class="filler"></li>
</ul>

For the CSS:

.steps {
    width:100%;
    list-style-type: none;
    padding:0;
    margin:0 auto;
    background:url(http://tnsdev.cloudapp.net/dev/steps_slice.png) repeat-x;
    text-align: justify;
    line-height: 0;
}
.steps li {
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    position: relative;
    text-align: center;
}
.steps li .icon {
    background:url(http://tnsdev.cloudapp.net/dev/steps_icon.png) top center no-repeat;
    height:44px;
    width:44px;
}
.steps li p {
    position: absolute;
    width: 100px;
    top: 50px;
    left: -22px;
    margin: 0;
}
.steps li.first p {
    text-align: left;
    left: 0;
}
.steps li.last p {
    text-align: right;
    left: auto;
    right: 0;
}
.steps li.filler {
    width: 100%;
    height: 0;
    font-size: 0;
    vertical-align: top;
}

See demo at jsFiddle

First, I used text-align: justify on the parent container to evenly distribute the li elements which are inline-blocks that shrink to fit the square .icon elements.

The .filler line forces a new 100% width line that allows the text-justify to work. I set the vertical-align: top (and line-height: 0 in the parent) to get rid of a orphan with space that is created by the filler element.

I then take the labels out of the flow using absolute positioning, and the adjust the text-alignment for the first and last list items and position them using a negative margin to center the labels.

The one limitation is that there the width is specified for the labels, so you should add a min-width to the parent container as you see fit.

You have plenty of room here to adjust things as needed.

See this Fiddle

I'm using the calc function for the width of the 4 first lis.

this is working like this.

the 4 first will look like O------ and the 5'th will look like O.

width: calc((100% - 44px)/4);

Explanation: the fifth li takes exactly 44px, so the 4 first lis divide the rest between them equally.