Question

我几乎没有在我的CSS中使用float:right，现在我做了并遇到了一个烦人的问题。我将菜单项浮动到右侧

我的HTMl

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

我的CSS

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

现在，当项目浮动时，我收到的菜单是此订单Contact Feedback Home，但我希望它们的顺序相反，即Home Feedback Contact

Answer 1

使用display：inline on＆lt; li＆gt;可能会导致问题，特别是如果您最终选择下拉菜单。我推荐类似的东西（只有花车展示，你知道你想要添加的其他样式）：

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

因此菜单本身将向右浮动，而菜单项将浮动到左侧。

另一个解决方案是简单地颠倒＆lt; li＆gt;的

的顺序

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

答案的变化 - 根本没有浮动。

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

Answer 6

在运行时更改显示顺序的“部分”答案：

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

这是一个jQuery插件。您可以使用

反转示例中元素的顺序

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

不是一种非常优雅的方式，但它有效（如果当然启用了JavaScript ......）

如何更改浮动元素的顺序？

6 个答案: