jQuery 如何在固定高度 UL 中滚动 LI 项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4604059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll LI items in a fixed height UL?
提问by Tahir Akram
Here is my example HTML.
这是我的示例 HTML。
And I want to have scroll for my LI items.
我想为我的 LI 项目滚动。
Which are of 2 levels. Means, I want to apply class on every UL.
其中有 2 个级别。意思是，我想在每个 UL 上应用类。
So how can I do that. By using JQuery or CSS tweaking.
那我该怎么做。通过使用 JQuery 或 CSS 调整。
PS: I am using this example.
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>
回答by David says reinstate Monica
With your posted mark-up, and the best guess I could make of the intent of your question (your title doesn't really match the example you linked to), I came up with this:
使用您发布的标记，以及我对您问题意图的最佳猜测（您的标题与您链接的示例并不真正匹配），我想出了这个：
#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;
}
回答by egze
The main idea is to set a fixed height for the UL list, and add
主要思想是为UL列表设置一个固定的高度，并添加
overflow: scroll;
Maybe you'll also need to tweak the width of UL, since the scroll bar will need some extra space.
也许您还需要调整 UL 的宽度，因为滚动条需要一些额外的空间。
