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

これが私が提案するものです：http：//jsfiddle.net/thirtydot/w64Nb/2/

HTMLは、質問の内容と同じです。

いいえ、.item- {uid-for-menu}はランダムですが、各liについて、jqueryの最後のツリーメニューでフロートできます。–ガブリエルサントス

@thirtydotは、クラスが常に同じであると想定し、1つの解決策を提案します。次に、JavaScriptを適応させて、サンプルクラスと同じクラスを生成します。–ガブリエルサントス

存在する特定のクラスに依存したり、JavaScriptを使用してそれらを強制的に同じにする代わりに、jQueryを使用して問題全体を解決できます（別のコメントで、利用可能だと言っています）。

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

これにより、最後の3つliが内部に取り込まれ、クラス（これはちょうど）が#menu追加され、HTMLの順序が逆になります。.rightfloat: right

于 2012-05-12T21:07:34.447 に答える
3

あなたはこのようにそれを行うことができます。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でこのようなものを使用しました

于 2012-05-12T20:23:31.270 に答える
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のプロパティとtoのプロパティを設定してからdisplay、最初の3つのsを設定するだけで、ドキュメントで宣言されている順序を台無しにすることなく元の位置に戻ることができます。このような：liinline-blocktext-alignulrightfloatlileft

#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

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

私のソリューションプレビュー：

ここに画像の説明を入力してください

メニュー項目の順序を変更できると思うので、最後の3つの項目の順序を逆にするだけで済みます（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 に答える
1

なぜ右に浮かぶ要素の順序が反転した場合、これが浮きの動作になっているのか疑問に思っていると思います。それはすべてここで説明されています：

フロートボックスは、その外縁が収容ブロックの端または別のフロートの外縁に接触するまで、左または右に移動します。

この例の3つの右フロート要素の場合、最初の要素（ソース順）は右端に揃えられます。の次の項目も右にシフトします。途中で別のフロートを見つけて停止するだけです。3番目のフロートについても同様です。

解決策は、左に浮かぶ3つの右に浮かぶ要素を含む1つの右に浮かぶコンテナを作成することです。

于 2012-05-12T22:12:07.250 に答える