Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

evenly distribute li items

Tags:

html

css

hope this is self explanatory:

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;
}

http://jsfiddle.net/HYYwn/1/

how can i achieve that the distances between the bubbles are all the same and the bubble of step5 is on the far right? i am constraint to have 5 different li's and to use % so it stays responsive.

can't get around this myself at the moment playing with it for a while already!

EDIT:

the result should look like this

 O--O--O--O--O 

and not like

--O--O--O--O--O  

or

O--O--O--O--O--  

or

--O--O--O--O--O--
like image 597
kritop Avatar asked Sep 13 '13 13:09

kritop


People also ask

How do you center align Li?

Just give the list centered text (e.g. ul. nav { text-align: center; } ) and the list items inline-block (e.g. ul. nav li { display: inline-block; } ). If you want to do it with margin for whatever reason, look into width: fit-content; .


2 Answers

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.

like image 189
Marc Audet Avatar answered Oct 26 '22 13:10

Marc Audet


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.

like image 36
avrahamcool Avatar answered Oct 26 '22 12:10

avrahamcool