надеюсь, что это самоочевидно:
HTML:
<ul class="steps">
<li class="step1 first">
<div class="icon basket"></div>
1.Warenkorb
</li>
<li class="step2">
<div class="icon registration"></div>
2.Adresse
</li>
<li class="step3">
<div class="icon payment"></div>
3.Zahlungsart
</li>
<li class="step4">
<div class="icon order"></div>
4.Bestätigen
</li>
<li class="step5 last">
<div class="icon thankyou last"></div>
5.Danke
</li>
<div style="clear:both"></div>
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;
}
.steps li {
width:20%;
float:left;
}
.steps li .icon {
background:url(http://tnsdev.cloudapp.net/dev/steps_icon.png) no-repeat;
height:44px;
width:44px;
}
Как я могу достичь того, что расстояния между пузырьками все одинаковы, а пузырька шага 5 находится в крайнем правом углу? Я ограничусь тем, что у меня есть 5 разных li и для использования%, поэтому он остается отзывчивым.
не может обойти это сам в данный момент, играя с ним уже какое-то время!
EDIT:
результат должен выглядеть так:
O--O--O--O--O
и не нравится
--O--O--O--O--O
или
O--O--O--O--O--
или
--O--O--O--O--O--