html - 菜单左右浮动

Question

我有以下 HTML:

<div id="menu">
    <ul class="menu">
        <li class="item-101"><a href="/">Home</a></li>
        <li class="item-113"><a href="/sobre">Sobre</a></li>
        <li class="item-114"><a href="/portfolio">Portfolio</a></li>
        <li class="item-115"><a href="/bastidores">Bastidores</a></li>
        <li class="item-116"><a href="/blog">Blog</a></li>
        <li class="item-117"><a href="/contato">Contato</a></li>
    </ul>
</div>

和 CSS:

#menu{width:900px;margin:0 auto;}
#menu ul{margin:0;padding:0;}
#menu li{float:left;margin:10px;}
#menu .item-115, #menu .item-116, #menu .item-117{float:right;}

我想要 3 个向左浮动的菜单和 3 个向右浮动的菜单，但它们正在恢复顺序。

如何做到这一点？

Answer 1

这是我的建议:http://jsfiddle.net/thirtydot/w64Nb/2/

HTML 与您问题中的内容相同。

No, .item-{uid-for-menu} are random, but for each li I can float with jquery last tree menu. – Gabriel Santos

@thirtydot assume the class always will be the same, and suggest one solution, then, I adapt my javascript to generate the same class as my sample class. – Gabriel Santos

不是依赖某些存在的类，或者使用 JavaScript 强制它们相同，您可以使用 jQuery 解决整个问题(在不同的评论中，您说您可以使用):

$($('#menu li').slice(-3).get().reverse())
    .addClass('right').remove().appendTo('#menu .menu');​

这将在 #menu 中使用最后三个 li，添加 .right 类(它只是 float: right )，并反转 HTML 中的顺序。