How to change the order floated elements?

问题

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

回答1:

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

回答2:

Try this

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

回答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; 
}

回答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;
}

回答5:

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;
}

回答6:

"Partial" answer for changing the display order in runtime:

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

This is a jQuery plugin. You can reverse the order of the elements in your example with

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

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

来源：https://stackoverflow.com/questions/3117815/how-to-change-the-order-floated-elements

标签

html

css

css-float