6

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?

Denim Mage
  • 93
  • 1
  • 1
  • 7
  • Your answer might be here; http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css –  Apr 06 '13 at 21:15

2 Answers2

23

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.

Paul M
  • 366
  • 1
  • 3
  • 8
  • `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. –  Apr 06 '13 at 20:56
  • Perfect! This works! How do I mark this as the correct answer? – Denim Mage Apr 06 '13 at 21:15
0

Any reason to not just float the <ul>?

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

http://jsfiddle.net/WPgHW/

Michael Theriot
  • 994
  • 7
  • 13
  • Please move to the comment section. This Is Not An Answer ;) –  Apr 06 '13 at 20:59
  • 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 :) –  Apr 06 '13 at 21:02
  • 2
    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 `
      ` 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. :)
     – Michael Theriot Apr 06 '13 at 21:14
  • 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. – Denim Mage Apr 06 '13 at 21:15
  • 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 :) –  Apr 06 '13 at 21:17
  • 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. – Michael Theriot Apr 06 '13 at 21:18
  • 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. – Denim Mage Apr 06 '13 at 21:19