1

サブメニューのあるメニューがあります。これを実現するために、ネストされた uls を使用しました。今、私はこの状況に直面しています: すべてのアイテムとサブアイテムをそれぞれのレベルで水平に表示したいです。問題は、親リストに子リストがある場合、その幅が大きくなり、同じレベルの次のアイテムが右端に移動することです。

物事をより明確にするために、私が取っていることのフィドルを次に示します: http://jsfiddle.net/matias/n8gFT/

ご覧のとおり、アイテム B と C を緑色の破線のスペースに配置したいと思います。

これを行うことは可能ですか？

display: inline-blockネストされた uls とfor itemes の代わりに使用し続けたいfloat: left

サンプル HTML :

<ul>
    <li>ITEM A
        <ul>
            <li>sub item A1</li>
            <li>sub item A2</li>
        </ul>
    </li>
    <li>ITEM B</li>
    <li>ITEM C</li>
</ul>

サンプル CSS :

ul{border: 1px solid red; padding: 10px;}
li{display: inline-block; border: 1px solid blue; margin: 5px; padding: 10px; vertical-align: top;}
span{border: 1px dashed lime; margin: 0 10px; padding: 5px;}

編集 1 : 言い忘れていましたが、A、B、C には子供がいます。B をクリックすると、その子が表示され、A と C が非表示になります...など....

4

4 に答える 4

1

私が探していたものをdisplay: table-cell、li を使用して ul の幅を縮小することで達成しました。

デモを見る

于 2013-11-20T17:14:57.377 に答える
1

ここにプッシュされているリストのスタイルを設定できますof margin-left: -20px;が、これは実用的なフィドルです

http://jsfiddle.net/n8gFT/1/

もちろん、押し込む量は変更することで編集できます。margin-left

于 2013-07-07T17:08:13.780 に答える
-2

サブリストにクラスを追加し、次のようにスタイルを設定します。

.sub { position: absolute; margin-left: -27px; }
于 2013-07-07T17:24:05.823 に答える