Question

我正在使用以下代码生成包含大量项目的列表。

<ul class="custom-list">
                        <li class="item" *ngFor="let follower of followers">
                            <comment [username]=follower.from.username   [comment]=follower.text [imageURI]=follower.from.profile_picture></comment>
                        </li>
                    </ul>

问题是，由于<li>标签的数量，我不想扩展整个页面。相反，我需要将列表的整个高度保持为height=500px;，而我需要在列表中有一个滑块。那我怎么能这样做呢？

我试过这个：

style="height:500px; overflow:hidden; overflow-y:scroll;"

但它会消失我的<li>代码

Answer 1

你喜欢这样的吗？只需overflow-y:scroll;（在整页中打开摘要即可正确查看）

.custom-list{
  height:500px;
  overflow-y:scroll;
}

<ul class="custom-list">
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
  <li class="item" >Test</li>
</ul>

Answer 2

尝试使用以下代码

<强> HTML

<ul class="custom-list">
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
  <li>Username</li>
</ul>

<强> CSS

.custom-list {
  max-height: 500px;
  overflow: hidden;
  overflow-y: scroll;
  display: block;
}

Answer 3

.item_list
{
height:100px;
  overflow-x:hidden;
  overflow-y:auto
}

<ul class="item_list">
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
    <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
    <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
  <li class="item" >vivek</li>
</ul>

你可以尝试这个css

为列表

3 个答案: