设置列表的导航栏

我使用下面的代码生成一个包含大量项目的列表。设置列表的导航栏

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

来源

2016-08-12 Kamyar Parastesh

.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

来源

2016-08-12 10:12:17

你这样的事情？只需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>

来源

2016-08-12 10:07:56

尝试使用下面的代码

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

来源

2016-08-12 10:09:16

设置列表的导航栏

回答

相关问题