菜单左右浮动

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/只是不要让“左侧”项目浮动； 仅适用于您需要向右浮动的那些。

#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的最后一个树菜单浮动。 –加布里埃尔·桑托斯（Gabriel Santos）

@thirtydot假定该类始终是相同的，并提出一种解决方案，然后，我将自己的javascript修改为生成与示例类相同的类。 –加布里埃尔·桑托斯（Gabriel Santos）

无需依赖存在的某些类或使用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>

---

如果您无法编辑源代码，则可以执行以下操作。 但是，这涉及到在菜单项上设置固定宽度。 现场示例 ：

#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实现此目的，只需将li s的display属性设置为inline-block并将ul的text-align属性设置为right ，然后将前三个li s float到left以便它们返回其原始位置而不弄乱它们在文档中声明的顺序。 像这样：

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

现场示例：

希望能帮助到你。

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

我的解决方案预览：

我认为您可以更改菜单项的顺序，因此您只需要颠倒最后三个项的顺序（ 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

我相信您想知道为什么将右浮元素的顺序翻转（即翻转）应该如何表现。 这里全部描述 ：

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

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

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