当元素数量增加时，水平滚动条会裁剪左侧元素

Question

我正在尝试制作一个水平滚动条，其中包含用于过滤图像的元素。元素可以是 all、app、web 等，图像将被相应地过滤。过滤器工作正常，但一旦滚动条中的元素数量增加，左侧元素就会开始裁剪。

工作-

不工作（滚动条裁剪了“all”和“app”元素）-

HTML-

  <div class="scrollmenu">
                   
    
                 
                    <ul id="portfolio-flters" class="d-flex justify-content-center" data-aos="fade-up" data-aos-delay="100">
                      
                      <li data-filter="*" class="filter-active">All</li>
                      <li data-filter=".filter-app">App</li>
                      <li data-filter=".filter-card">Card</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
    
                      
                    </ul>
               
                  
                  
                </div>

CSS-

div.scrollmenu {
  background-color: rgb(255, 255, 255);
  overflow-x:auto;
  overflow-y: hidden;
  white-space:nowrap;
  margin: 0 auto;
  text-align: center;
 
}

.portfolio #portfolio-flters {
  list-style: none;
  margin-bottom: 20px;
}



.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  margin: 10px 5px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #444444;
  transition: all 0.3s;
  padding: 8px 20px;
  border-radius: 50px;
  font-family: "Poppins", sans-serif;
}

Answer 1

在我的电脑上工作正常，只需将 class 投资组合添加到主 div。

并且由于您使用的是 flex classes，请添加 justify-content-start

Answer 2

只需添加 display:flex 即可。

div.scrollmenu {
      background-color: rgb(255, 255, 255);
      overflow-x:auto;
      overflow-y: hidden;
      white-space:nowrap;
      margin: 0 auto;
      text-align: center;
      display: flex;
      width: 500px;
     
    }

当元素数量增加时，水平滚动条会裁剪左侧元素

Horizontal scrollbar crops the left elements when number of elements are increased

html

javascript

css

web-deployment