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/xeQBd/1/ 只是不要让'left'项浮起;仅适用于您需要向右浮动的那些。

#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-bouwlust.nl/activiteiten上使用了类似的内容

Answer 2

以下是我的建议：http://jsfiddle.net/thirtydot/w64Nb/2/

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

不，.item- {uid-for-menu}是随机的，但对于每个li，我可以使用jquery最后一个树菜单浮动。 - 加布里埃尔桑托斯

@thirtydot假设班级总是相同的，并建议一个   解决方案，然后，我调整我的JavaScript以生成与我相同的类   样本班。 - 加布里埃尔桑托斯

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

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

这将花费li内的最后三个#menu，添加.right类（只是float: right），并反转HTML中的顺序。

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>

如果您无法编辑源代码，您可以执行以下操作。它涉及在菜单项上设置固定宽度。的 Live Example ：

#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; }

Answer 4

您可以使用纯css实现此目的，只需将display的{{1}}属性设置为li，将inline-block的{{1}}属性设置为text-align，然后ul前right到float，这样他们就可以回到原来的位置而不会弄乱他们在文档中声明的顺序。像这样：

li

<强> Live example:

希望它有所帮助。

Answer 5

CSS：

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

Answer 6

我的解决方案预览：

enter image description here

我认为您可以更改菜单项的顺序，因此您只需要反转最后三项（online demo on dabblet.com）的顺序：

<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>

        <!-- reverse order of last three items -->
        <li class="item-117"><a href="/contato">Contato</a></li>
        <li class="item-116"><a href="/blog">Blog</a></li>
        <li class="item-115"><a href="/bastidores">Bastidores</a></li>
    </ul>
</div>

Answer 7

我相信你想知道为什么翻转的右浮动元素的顺序，这就是浮点数应该如何表现。它是all described here：

浮动框向左或向右移动直到其外边缘接触包含块边缘或另一个浮动的外边缘。

对于示例中的三个右浮动元素，第一个（源顺序）与右边缘对齐。下一个项目也向右移动;只是为了找到另一个浮动并停止。同样对于第三个浮动。

解决方案是创建一个右浮动容器，其中包含三个假定为右浮动的元素，向左浮动。

菜单左右浮动

7 个答案: