CODEWITHSUNDEEP
htmlcsswordpressresponsive-design
Thibaud Clement
Thibaud Clement

Reputation: 6897

Evenly distribute li items, with absolute width

In the footer of a responsive website, I need to evenly distribute some li items.

This is what I want to achieve:

enter image description here

And this is what I have:

enter image description here

I would like to avoid setting absolute width for each li, to keep a responsive capability of this part of the website.

What would be the optimal way to proceed?

Upvotes: 1

Views: 43

Answers (2)

Andrei Volgin
Andrei Volgin

Reputation: 41089

The effect in your screenshot can be achieved by using a margin:

.bottomMenu li {
    margin-right: 24px;
}

If you want a nice, justified look and you are not concerned with very old browsers, you can use a flex model:

.bottomMenu (
    display: flex;
    justify-content: space-between;
}

Upvotes: 1

jdwallace12
jdwallace12

Reputation: 127

You could try 

text-align:justify;

for your ul element

here is a fiddle

http://jsfiddle.net/89bnF/833/

Upvotes: 1

Related Questions