Question

I have a list with five items which is displayed inline.
The text in the first list item has to be align with the left side and the last item with the right side. What I want is an equal spacing between the text in each item and still be relative to both the right and left side.

I found this: http://jsfiddle.net/Cerebrl/Wt4hP/
in this thread: A Space between Inline-Block List Items

Which wouldn’t work since its all aligned to the left.
Bellow is an example code and also on jsfiddle here:
http://jsfiddle.net/phacer/uV9s9/

any ideas? js or jquery solutions works as well for me if there are any.

​<ul>
    <li>first item</li>
    <li>second item</li>
    <li>3 item</li>
    <li>fourth item</li>
    <li class='last'>5 item</li>
​</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

css:

ul { width: 650px; }
ul li { width: 130px; position: relative; display: inline-block; float: left; }
ul li.last { float: right; text-align: right; }​

Answer 1

You can try with giving the width in % instead of px

ul { width: 650px; }
ul li { width: 20%; position: relative; display: inline-block; float: left; }
ul li.last { float: right; text-align: right; }​