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?

Brittnybritton

Your answer might be here; #7426165 – Gurdwara

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.

Glidebomb

Is the desired styling possible without changing the HTML? Also this isn't an answer to the question, it's an advice on the way the OP uses floats. Please move this to the comment section. – Gurdwara

Perfect! This works! How do I mark this as the correct answer? – Brittnybritton

Answer 2

Any reason to not just float the <ul>?

ul {
  list-style-type: none;
  float: right;
}
li { float: left; }

http://jsfiddle.net/WPgHW/

Athalla

Please move to the comment section. This Is Not An Answer ;) – Gurdwara

The point of answering is to answer what the OP asks. Advice on a certain part of the the question should go to the comment section :) – Gurdwara

I believe you have misread the question, Allendar. The OP is asking for a way to change the layout of the navigation without having to modify the HTML. You posted an answer in the comments (and subsequently deleted it) that involved adding an attribute to the <ul> tag to reverse the order of it (which, interestingly enough, would still rely on floats). But I thank you for reminding me what the the answer feature is for. :) – Athalla

I said that I already tried that. Did you read the whole question? It probably doesn't work because my unordered list has a background and a defined width to display that background as wider than just the list items themselves. – Brittnybritton

Yes I misread the Ordered List thread, so I deleted it again. The OP asks to maintain the order when styling the elements, so I think the answer is not right in the for what the OP asks :) – Gurdwara

Your question stated you were unsuccessful in doing so, so I provided the method to do it with an example of it working. I am unsure why you were unsuccessful as you have not provided your attempt to do so. – Athalla

My unordered list needs to be a width of 100% of my content box, and extra list items will be added below the first row of list items when space runs out. I don't think your solution works with that. – Brittnybritton