<div class="div_item">
　　<div id="nav">
　　　　<ul class="list">
　　　　　　<li class="item">導航1</li>
          <li class="item">導航2</li>
          <li class="item">導航3</li>
          <li class="item">導航4</li>
          <li class="item">導航5</
 
li>
          <li class="item">導航6</li>
          <li class="item">導航7</li>
          <li class="item">導航8</li>
          <li class="item">導航9</li>
          <li class="item">導航10</li>
          <li class="item">導航11</li>
          <
 
li class="item">導航12</li>
          <li class="item">導航13</li>
          <li class="item">導航14</li>
          <li class="item">導航15</li>
          <li class="item">導航16</li>
          <li class="item">導航17</li>
          <li class="item"
 
>導航18</li>
          <li class="item">導航19</li>
          <li class="item">導航20</li>
　　　　</ul>
　　</div>
</div>

首先 加入我們的導航列表，具體樣式可以自己調整，這裡我用最簡單的樣式；

然後滾動的效果css

 1 .div_item #nav {
 2     overflow-x: scroll;
 3     position: relative;
 4     color: #666666;
 5 }
 6 .div_item #nav .list{
 7     box-sizing: border-box;
 8     white-space: nowrap;
 9     padding: 0 1.5rem;
10     width: max-content;
11 }
12 .div_item #nav .item {
13     width: 150px;
14     height: 3rem;
15     font-size: 1.5rem;
16     line-height: 3rem;
17     margin-right: 1rem;
18     display: inline-block;
19     transition: font-size 0.15s;
20 }
21 .div_item #nav .item.selected {
22     color: #191919;
23     font-size: 2rem;
24 }

25 .div_item #nav::-webkit-scrollbar {
26     display: none;
27 }