Tajuk semula: Paparan Produk Menegak

Question

Pada halaman web saya, pada masa ini, produk projek disenaraikan secara menegak, baris demi baris.

Saya mahu memaparkannya secara menegak dengan cara yang boleh ditatal.

Bagaimana untuk menukarnya kepada tahap?

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>

Ini ialah paparan contoh semasa, dengan item dimuatkan secara menegak.

Answer 1

Saya menambah imej pegun untuk rujukan anda.

.product-default-slider {
  overflow-x: scroll;
  white-space: nowrap;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: gray lightgray;
}

.product-default-slider::-webkit-scrollbar {
  height: 8px;
}

.product-default-slider::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 4px;
}

.product-horizontal-slider {
  display: flex;
  flex-wrap: nowrap;
}

.product__box {
  flex: 0 0 auto;
  margin-right: 10px;
}

  

    

      
      

        

          


            
            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 1
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 2
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 3
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 4
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 5
                

                  .99