如何更改顺序浮动元素？ [英] How to change the order floated elements?

问题描述

我在我的CSS中几乎不使用 float：right ，现在我做了，遇到了一个恼人的问题。我将菜单项向右浮动

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

我的HTM1

    <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

推荐答案

在< li>上使用display：inline可能会导致问题，尤其是如果您最终要使用下拉菜单。我建议类似的东西（只有浮动显示，你知道你想添加其他样式）：

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.

另一种解决方案是简单地颠倒您的< li>的

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

这篇关于如何更改顺序浮动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！