How do I simulate floating list items right in an unordered list without reversing the order?

Question

I have a navigation menu on my site, which is an unordered list. Items are naturally displayed left-to-right, and in the proper order. It looks like this:

|[--1--][-2-][----3----][--4--].......|
|[---5---][-6-][-----7-----][-8-].....|
|[------9------][----10----]..........|

Obviously, if I float all the list items ("li") to the right, they will show up in the position that I want them to shop up in-- but in the reversed order:

|.......[--4--][----3----][-2-][--1--]|
|.....[-8-][-----7-----][-6-][---5---]|
|..........[----10----][------9------]|

I like the positioning, but I don't want the reversed order. I need it to look like this:

|.......[--1--][-2-][----3----][--4--]|
|.....[---5---][-6-][-----7-----][-8-]|
|..........[------9------][----10----]|

The limitation that I present is that I cannot rewrite the menu HTML in the reverse order. I want to do this in CSS alone. Supposedly, this can be done by floating the unordered list ("ul") to the right, and floating the list items (li), to the left. However, I have been unsuccessful in doing this, and since my CSS is so minimal, I am not sure what I could be missing.

Is the desired styling possible without changing the HTML?

Answer 1

Don't use float, but make the navigation items display: inline-block. If you set the container to text-align: right, the blocks will "float" right.

nav{text-align: right;}
nav li{display: inline-block; text-align: center;}

If you want support for Internet Explorer 7, you should add zoom: 1 and *display: inline.