CSS how to make scrollable list

前端未结

关注

 2  2049

I am trying to create a webpage which is made up of a header and bellow the header a list of items. I want the list of items to be vertically scrollable. I also would like the w

相关标签:

2条回答

清酒与你

2021-01-31 08:35

Another solution would be as below where the list is placed under a drop-down button.

  <button class="btn dropdown-toggle btn-primary btn-sm" data-toggle="dropdown"
    >Markets<span class="caret"></span></button>

    <ul class="dropdown-menu", style="height:40%; overflow:hidden; overflow-y:scroll;">
      {{ form.markets }}
    </ul>

0 讨论(0)

时光说笑

2021-01-31 08:57

As per your question vertical listing have a scrollbar effect.

CSS / HTML :

nav ul{height:200px; width:18%;}
nav ul{overflow:hidden; overflow-y:scroll;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS Bin</title>
    </head>
    <body>
        <header>header area</header>
        <nav>
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
                <li>Link 4</li>
                <li>Link 5</li>
                <li>Link 6</li> 
                <li>Link 7</li> 
                <li>Link 8</li>
                <li>Link 9</li>
                <li>Link 10</li>
                <li>Link 11</li>
                <li>Link 13</li>
                <li>Link 13</li>

            </ul>
        </nav>
        
        <footer>footer area</footer>
    </body>
</html>

0 讨论(0)