web-dev-qa-db-ja.com

固定高さのULでLIアイテムをスクロールする方法は？

これが私のHTMLの例です。

そして、LIアイテムのスクロールが欲しいです。

2つのレベルがあります。つまり、すべてのULにクラスを適用したいのです。

どうすればそれができますか。 JQueryまたはCSSの調整を使用する。

PS：私はこれを使用しています 例 。

<ul id="nav" class="dropdown">
<li class="dir">
    Item_Root
    <ul>
        <li class="dir">
            Item_1_Level
            <ul>
                <li>Item_Level_2</li>
                <li>Item_Level_2</li>
                <li>Item_Level_2</li>
                <li>.... up to N items</li>
            </ul>
        </li>
        <li>Item_Level_1</li>
        <li>Item_Level_1</li>
        <li>Item_Level_1</li>
        <li>Item_Level_1</li>
        <li>.... up to N items</li>
    </ul>
</li>

 </ul>
jquerycssscrollhtml-lists
7
Tahir Akram

あなたの投稿されたマークアップと、あなたの質問の意図を私が推測できる最善の推測（あなたのタイトルはあなたがリンクした例と実際には一致しません）で、私はこれを思いつきました：

#nav {
    width: 12em;
    height: 20em;
    line-height: 2em;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
    overflow: scroll;
    overflow-x: hidden;
}

li {
    border-top: 1px solid #ccc;
}

ul ul {
    text-indent: 1em;
}

ul ul ul {
    text-indent: 2em;
}

JS Fiddle Demo 。

24
David says reinstate Monica

主なアイデアは、ULリストに固定の高さを設定し、追加することです

overflow: scroll;

スクロールバーには余分なスペースが必要になるため、ULの幅も微調整する必要があるかもしれません。

6
egze