css横向滚动条的几种实现方式

1.使用white-space属性
通过设置white-space属性为nowrap，可以使内联元素（如文本或内联块）不换行，从而在横向产生滚动条。

.container {  
white-space: nowrap;  
overflow-x: auto;  
}  
  
.item {  
display: inline-block;  
}  

html复制代码<div class="container">  
<div class="item">...</div>  
<div class="item">...</div>  
<!-- 更多的.item元素 -->  
</div>  

2. Flexbox布局
   使用Flexbox布局，可以使子元素横向排列并产生滚动条。

   .container {  
   display: flex;  
   overflow-x: auto;  
   }  
     
   .item {  
   flex: 0 0 auto; /* 防止项目缩小 */  
   或者//flex-shrink:0; /* 防止项目缩小 */  
   两者实现效果一样
   }  

   <div class="container">  
   <div class="item">...</div>  
   <div class="item">...</div>  
   <!-- 更多的.item元素 -->  
   </div>  

3. Grid布局
   使用CSS Grid布局也可以创建横向滚动。

   .container {  
   display: grid;  
   grid-auto-flow: column;  
   overflow-x: auto;  
   }  
     
   .item {  
   width: 100px; /* 或其他固定宽度 */  
   }  
   

   <div class="container">  
   <div class="item">...</div>  
   <div class="item">...</div>  
   <!-- 更多的.item元素 -->  
   </div>  

   确保在使用上述方法时，子元素的总宽度超出容器的宽度，这样横向滚动条才会出现。另外，在移动设备上，横向滚动条可能会默认隐藏，用户通过滑动来进行内容的横向滚动。

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1005.html

转载时须注明出处及本声明