左右浮动的菜单

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与您问题中的内容完全相同。

不，.item-{uid-

-}是随机的，但对于每个li，我可以使用jquery最后一个树菜单浮动。- Gabriel Santos @thirtydot假设类总是相同的，并提出一个解决方案，然后，我调整我的javascript以生成与我的示例类相同的类。--加布里埃尔·桑托斯

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

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

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

Answer 2

你可以这样做。http://jsfiddle.net/xeQBd/1/只是不让“左”项浮动；只应用于需要向右浮动的项。

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

我在菜单中的www.hoeve-puwlust.nl/activiteiten上使用过类似这样的东西

Answer 3

在自己的列表中保留每一个

<nav>
    <ul class="menu menu-to-the-left">
        <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>
    </ul>
    <ul class="menu menu-to-the-right">
        <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>
</nav>

如果你不能编辑源代码，你可以这样做。它涉及到在菜单项上设置固定宽度。

#menu {
    width:  900px;
    margin: 0 auto;
}

#menu ul {
    margin:  0;
    padding: 0;
}

#menu li, #menu li a {
    float:  left;
    width: 100px;
}
#menu li:nth-child(4) {
    margin-left: 300px;
}