如何在固定高度UL中滚动LI项目?

时间:2011-01-05 12:40:18

标签: jquery css scroll html-lists

这是我的示例HTML。

我想滚动我的LI项目。

哪个是2级。意思是,我想在每个UL上申请课程。

那我怎么能这样做呢。通过使用JQuery或CSS调整。

PS:我正在使用此example

<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>  

2 个答案:

答案 0 :(得分:22)

使用您发布的加价标记,以及我对您的问题意图的最佳猜测(您的标题与您链接的示例不相符),我想出了这个:

#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

答案 1 :(得分:6)

主要思想是为UL列表设置固定高度,然后添加

overflow: scroll;

也许你还需要调整UL的宽度,因为滚动条需要一些额外的空间。