css - 为列表设置导航栏

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;相反，我需要在我的列表中有一个 slider 。 那我该怎么做呢？

我试过这个:

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

但它消失了我的<li>标签

Answer 1

.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