Geek Answers Handbook

How to simulate elements with a floating list directly in an unordered list without changing the order?

I have a navigation menu on my site which is an unordered list. Elements naturally appear from left to right and in the correct order. It looks like this:

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

Obviously, if I put all the list items ("li") to the right, they will appear at the position in which I want them to go to the store, but in the reverse order:

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

I like positioning, but I don't need the reverse 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 HTML code of the menu in the reverse order. I want to do this only in CSS. Presumably, this can be done by placing an unordered list ("ul") to the right and moving list items (li) to the left. However, I was not successful in this, and since my CSS is so minimal, Iā€™m not sure what I could lose.

Is the desired styling possible without modifying the HTML?

+6
source share
2 answers

Do not use float, but display navigation items: inline block. If you set the container to text-align: right, the blocks will float to the right.

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

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

+22
source

Any reason not just to swim <ul> ?

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

http://jsfiddle.net/WPgHW/

0
source

More articles:


All Articles