如何将网页中垂直排列的商品列表改为可滚动横向排列？

现有网页中商品为逐行垂直排列，需要改为可滚动的横向排列，当前视图代码及效果如下：

<div class="row">
   <div class="col-12">
     <div class="tab-content tab-animate-zoom">
       <!-- Start Single Tab Item -->
       <div class="tab-pane show active" id="fruits">
         <div class="default-slider default-slider--hover-bg-red product-default-slider">
           <div class="product-default-slider-4grid-2rows gap__col--30 gap__row--40"> 
             @foreach (var item in Model.CakesVM) {
             <!-- Start Single Default Product -->
             <div class="product__box product__default--single text-center">
               <!-- Start Product Image -->
               <div class="product__img-box  pos-relative">
                 <a href="#" class="product__img--link">
                   <img class="product__img img-fluid" src="~/@Html.DisplayFor(modelItem => item.ProductPicture)" alt="">
                 </a>
                 <!-- Start Product Action Link-->
                 <ul class="product__action--link pos-absolute">
                   <li>
                     <a href="@Url.Action("addToCart", new { id=item.ID })" data-toggle="modal">
                       <i class="icon-shopping-cart"></i>
                     </a>
                   </li>
                   <li>
                     <a href="#">
                       <i class="icon-heart"></i>
                     </a>
                   </li>
                 </ul>
                 <!-- End Product Action Link -->
               </div>
               <!-- End Product Image -->
               <!-- Start Product Content -->
               <div class="product__content m-t-20">
                 <a href="product-single-default.html" class="product__link">@Html.DisplayFor(modelItem => item.ProductName)</a>
                 <div class="product__price m-t-5">
                   <span class="product__price">$@Html.DisplayFor(modelItem => item.ProductPrice)</span>
                 </div>
               </div>
               <!-- End Product Content -->
             </div>
             <!-- End Single Default Product --> 
             }
           </div>
         </div>
       </div>
       <!-- End Single Tab Item -->
     </div>
   </div>
 </div>

实现步骤 #

• 修改容器布局
  针对包裹商品的.product-default-slider-4grid-2rows容器，替换原有网格布局为Flex布局，开启横向滚动：

  .product-default-slider-4grid-2rows {
    display: flex;
    gap: 30px; /* 保留原列间距 */
    overflow-x: auto; /* 启用横向滚动 */
    padding-bottom: 15px; /* 避免滚动条遮挡商品 */
    flex-wrap: nowrap; /* 强制商品不换行 */
  }
  

  若原有类的网格样式冲突，可直接移除product-default-slider-4grid-2rows类，或用上述CSS覆盖原有样式。

• 固定商品卡片尺寸
  为商品卡片设置固定宽度，保证横向排列时规格统一：

  .product__box.product__default--single {
    flex: 0 0 auto; /* 禁止卡片拉伸/收缩 */
    width: 280px; /* 可根据需求调整宽度，移动端可用百分比如30% */
  }
  

• 优化滚动体验（可选）
  自定义滚动条样式，提升视觉效果：

  .product-default-slider-4grid-2rows::-webkit-scrollbar {
    height: 6px;
  }
  .product-default-slider-4grid-2rows::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  .product-default-slider-4grid-2rows::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
  }
  .product-default-slider-4grid-2rows::-webkit-scrollbar-thumb:hover {
    background: #ccc;
  }
  

• 移除冲突插件（可选）
  若外层.default-slider滑块插件干扰横向滚动，可直接移除该容器，避免JS或CSS冲突。

内容的提问来源于stack exchange，提问作者Dev Beginner