Evenly distribute li items, with absolute width

Question

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

This is what I want to achieve:

And this is what I have:

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?

Answer 1

You could try

text-align:justify;

for your ul element

here is a fiddle

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

Answer 2

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