How to change the order floated elements?

Question

I hardly use float:right in my css and now I did and came across a annoying problem. I am floating my menu items to 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 items are float, I receive my menu is this order Contact Feedback Home, but I want them in opposite order ie Home Feedback Contact

Answer 1

Why did you choose to float to the right? Floating multiple items to the right means the first item will be the most right item and the last floated item will be on the left of your items.

The align your menu to the right and have your items on one line i would use this:

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

Answer 2

Try this

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

Answer 3

What you really want to do is make each li element an inline element, and float the ul as a whole to the right (or use text-align: right, if you prefer).

New CSS:

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

Answer 4

My variation on the answer - no floats at all.

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

Answer 5

Using display: inline on <li>'s can cause problems, especially if you're eventually going for dropdown menus. I'd recommend something similar to this (only floats show, you know what other styles you want to add):

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

So the menu itself will float to the right, while the menu items will float to the left.

Another solution would be to simply reverse the order of your <li>'s