Как прокрутить элементы LI в UL фиксированной высоты? - PullRequest
Новая
       10

Как прокрутить элементы LI в UL фиксированной высоты?

6 голосов
/ 05 января 2011

Вот мой пример 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>

Ответы [ 2 ]

22 голосов
/ 05 января 2011

С вашей размещенной наценкой и наилучшим предположением, которое я мог сделать о цели вашего вопроса (ваш заголовок на самом деле не соответствует примеру, на который вы ссылались), я придумал следующее: 

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

6 голосов
/ 05 января 2011

Основная идея состоит в том, чтобы установить фиксированную высоту для списка UL и добавить 

overflow: scroll;

Возможно, вам также потребуется настроить ширину UL, поскольку полосе прокрутки потребуется некоторое дополнительное пространство..

...