I have a list of five items that are displayed inline. The challenge is to align the text in the first item with the left side and the text in the last item with the right side, while maintaining equal spacing between all items relative to both edges.
After searching, I came across a solution provided at this link: http://jsfiddle.net/Cerebrl/Wt4hP/, which was mentioned in this thread: A Space between Inline-Block List Items
However, the provided solution didn't work for me as it only aligned everything to the left. Below is an example code snippet available on jsfiddle here: http://jsfiddle.net/phacer/uV9s9/
Do you have any ideas? I am open to using JavaScript or jQuery solutions if there are any available.
<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; }