設置列表的導航欄

我使用下面的代碼生成一個包含大量項目的列表。設置列表的導航欄

<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

設置列表的導航欄

回答

相關問題