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

【问题标题】：How to change the order floated elements?如何更改浮动元素的顺序？
【发布时间】：2010-06-25 12:06:09
【问题描述】：

我在我的 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

【问题讨论】：

感谢所有替代方案，但我的实际问题仍未解决，如何更改浮动元素的 ORDER？

标签： html css css-float

【解决方案1】：

在

上使用 display: inline 可能会导致问题，尤其是当您最终要使用下拉菜单时。我会推荐类似的东西（只有花车显示，你知道你想添加什么其他样式）：

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

所以菜单本身会向右浮动，而菜单项会向左浮动。

另一种解决方案是简单地颠倒

的顺序

【讨论】：

“在
上使用 display: inline 可能会导致问题” - 我有兴趣了解更多关于此的详细信息，或许可以参考相关来源。

+1 @Ryan，不错。这有效并且与 IE 兼容。但我想听听有关更改浮动元素顺序的内容

Re: Sohnee - w3.org/TR/REC-html40/struct/global.html#h-7.5.3 “通常，块级元素可能包含内联元素和其他块级元素。通常，内联元素可能只包含数据和其他内联元素。”由于 <li> 现在是内联的，它们不能包含块元素，例如 <div> 和 <ul> 。

Re: Starx - 是的，我一直在寻找改变顺序的方法，但我认为这实际上是不可能的，因为浮动元素会“堆叠”在一起。改变顺序的唯一真正方法是切换 HTML，这并不总是可行的。

@Ryan Kinal - 问题中的示例在列表项元素中不包含任何块级元素，这意味着您正在编码不存在的复杂性。

【解决方案2】：

试试这个

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

【讨论】：

+1 好答案 - 可以在 UL 上使用 text-align: right 。
工作得很好，但填充没有按预期工作，顶部和底部填充被转义
@Starx - 也许我下面的解决方案会有所帮助 - 它不使用任何浮点数并且填充似乎被保留。
感谢这个替代方案，但我的实际问题仍然没有解决，如何更改浮动元素的 ORDER？
@Starx，据我所知，无法更改浮动的顺序

【解决方案3】：

您真正想要做的是使每个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; 
}

【讨论】：

感谢这个替代方案，但我的实际问题仍然没有解决，如何更改浮动元素的 ORDER？
@cmm，没有垂直填充老兄，如何保存它

【解决方案4】：

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

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

【讨论】：

@sohnee，这绝对是比@dDejan 更好的解决方案，避免了浮动，但填充问题仍然存在。为什么要避免顶部和底部填充？得到答案
@Starx：看看我的回答，这就是我使用display:inline-block 而不是display:inline 的原因。你不能给内联元素任何填充。
感谢这个替代方案，但我的实际问题仍然没有解决，如何更改浮动元素的 ORDER？
@Starx - 特别是填充。我在 Firefox 中工作，如果我增加填充：5px，我会在屏幕上看到填充增加。如果您让我知道确切的填充问题，我应该能够回答。干杯。
@sohnee，垂直填充，即顶部和底部

【解决方案5】：

你为什么选择向右浮动？将多个项目向右浮动意味着第一个项目将是最右侧的项目，最后一个浮动项目将位于项目的左侧。

将您的菜单向右对齐并将您的项目放在一行我会使用这个：

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

【讨论】：

谢谢，我在您的问题中遗漏了这些信息。我调整了答案以提供满足您要求的解决方案。
感谢这个替代方案，但我的实际问题仍然没有解决，如何更改浮动元素的 ORDER？

【解决方案6】：

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

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

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

来反转示例中元素的顺序

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

不是一个非常优雅的方式，但它可以工作（当然如果启用了 JavaScript...）

【讨论】：