How to change the ordered items of an order?

Question

I almost did not use float:rightin my css, and now I did it and came across an annoying problem. I am navigating the menu items on the right.

my html

    <ul id="extMenu">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Feedback</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>

my CSS

    #extMenuBlock {
    }
        #extMenuBlock ul#extMenu { 
            list-style:none;
            padding:0;
            margin:0; 
        }
        #extMenuBlock ul#extMenu li { 
            float:right;
            padding:5px; 
        }

Now, when the elements are float, I get my menu, this is the order Contact Feedback Home, but I want them in the opposite order, i.e.Home Feedback Contact

Answer 1

Using the display: inline on <li> can cause problems, especially if you end up going to dropdown menus. I would recommend something similar to this (only floats show, you know what other styles you want to add):

#extMenu { float: right; }
#extMenu li { float: left; }

, , .

<li>

Answer 2

ul#extMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    float: right;
}
ul#extMenu li {
    display: inline;
    padding: 5px;
}

Answer 3

? , , .

:

#extMenuBlock {
    text-align: right;
}
#extMenuBlock ul#extMenu {
    list-style:none; padding:0; margin:0;
}
#extMenuBlock ul#extMenu li {
    display: inline-block; padding:5px;
}

Answer 4

, , - li ul ( text-align: right, ).

CSS:

#extMenuBlock {
    float:right;
}
#extMenuBlock ul#extMenu { 
    list-style:none;
    padding:0;
    margin:0; 
}
#extMenuBlock ul#extMenu li { 
    display:inline;
    padding:5px; 
}

Answer 5

My variation of the answer is that no pop-ups exist at all.

ul#extMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}
ul#extMenu li {
    display: inline;
    padding: 5px;
}

Answer 6

A "partial" response for changing the display order at runtime:

http://plugins.jquery.com/project/reverseorder

This is a jQuery plugin. You can reorder the elements in your example with

$('#extMenu li').reverseOrder();

Not a very elegant way, but it works (if JavaScript is enabled, of course ...)