1

我有以下 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 个向右浮动的菜单，但它们正在恢复顺序。

这个怎么做？

4

7 回答 7

3

You can do it like this. http://jsfiddle.net/xeQBd/1/ Simply don't let the 'left' items float; only apply to the ones that you need to float to the right. 

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

I've used something like this on www.hoeve-bouwlust.nl/activiteiten in the menu

于 2012-05-12T20:23:31.270 回答
3

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

HTML 与您的问题相同。

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

@thirtydot 假设该类始终是相同的，并建议一种解决方案，然后，我调整我的 javascript 以生成与我的示例类相同的类。——加布里埃尔·桑托斯

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

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

这将把最后三个li放在里面#menu，添加.right类（就是float: right），然后颠倒 HTML 中的顺序。

于 2012-05-12T21:07:34.447 回答
2

将每个都放在自己的列表中

<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;
}
于 2012-05-12T20:10:22.880 回答
2

您可以使用纯 css 来实现这一点，只需将 s 的display属性设置为lis 的属性和 to的inline-block属性text-align，然后将前三个s 设置为，这样它们就可以回到原来的位置，而不会弄乱它们在文档中声明的顺序。像这样：ulrightfloatlileft

#menu{width:900px;margin:0 auto;}
#menu ul{margin:0;padding:0; text-align: right}
#menu li{display:inline-block;margin:10px;}
#menu .item-101, #menu .item-113, #menu .item-114{float: left}​

现场示例：

希望能帮助到你。

于 2012-05-12T21:47:59.660 回答
1

我相信您想知道为什么如果翻转了右浮动元素的顺序，那么浮动应该如何表现。这一切都在这里描述：

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

对于示例中的三个右浮动元素，第一个（源顺序）与右边缘对齐。下一项也向右移动；只是发现另一个漂浮物挡住了它的路并停下来。第三个浮点数也是如此。

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

于 2012-05-12T22:12:07.250 回答
1

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;}
于 2012-05-12T20:17:56.333 回答
1

我的解决方案预览：

在此处输入图像描述

我认为您可以更改菜单项的顺序，因此您只需要将最后三个项目的顺序颠倒（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>
于 2012-05-12T20:19:26.560 回答