Floating part of Unordered List Left and part of it Right on the Same Line

Question

I know this question has been asked before here and here but I haven't been able to apply their solutions to my specific problem.

I have an unordered list like so:

http://tinker.io/926d2/5

<nav>
    <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    /ul>
</nav>

But the last child has to be floated left and the other elements floated right.

One note, I want to avoid adding classes or html around any of the list elements as they are being generated by PHP in one variable. However, adding classes to the nav and ul tags is fine.

What I have come up with so far is the following css:

nav li {
    display: inline;
    list-style: none;
    text-align: right;
}

nav li:last-child {
    text-align: left;
}

However, the first four elements are "blocking" the last child from being able to align to the left.

I have tried floating, and positioning the first four elements absolutey, and can't seem to figure it out.

Any ideas would be greatly appreciated!

Answer 1

http://jsfiddle.net/T5xc9/ see this fiddle. It uses text-align and float to achieve what you desire and doesn't use position absolute. Everything is relative

Answer 2

Can this help? I used no classes, only positioning. http://tinker.io/926d2/16