当前位置：首页 > news >正文

css中overflow-x:auto无效

news 来源：原创 2025/5/15 7:04:35

overflow-x:auto无效的可能原因：

1.父元素上层用了 position: fixed;那父元素要固定宽高

2.子元素用了浮动
3.父元素自动换行了

下面可正常显示

父元素样式：

overflow-x: auto; // 水平方向内容溢出显示滚动条
width: 300px; // 根据实际情况设置宽
height: 30px; // 根据实际情况设置高
white-space: nowrap; // 不换行

子元素样式：

display: inline-block;
或者
display: inline;

下面是我实现上面的案例

 <view class="xx-tablist">
  <view   bindtap="tab_click" wx:for="{{tablist}}" wx:for-item="item" wx:for-index="index" wx:key="index" data-id="{{item.id}}" class="{{index==0?'tab_item':'tab_item_left'}}">
           <view class="{{item.id==selTab?'tab_nameBlue':'tab_name'}}"> {{item.name}}</view>
 
 </view>
 </view>

 .xx-tablist{
display: flex;
overflow-x: auto;
padding-top: 20rpx;
padding-left: 30rpx;
  border-bottom: 2rpx solid #EFEFEF;
  width: 730rpx;

}
  .tab_item {
    min-width: 150rpx;
  }
    .tab_item_left {
    min-width: 150rpx;
    margin-left: 42rpx;
  }
    .tab_name {
    font-size: 28rpx;
    color: #424242;
    text-align: center;
    position: relative;
    font-family: Alibaba PuHuiTi;
    font-weight: 500;
    height: 60rpx;
    color: #424242;

  }
   .tab_nameBlue {
    position: relative;
    text-align: center;
    font-size: 28rpx;
    height: 60rpx;
    font-family: Alibaba PuHuiTi;
    font-weight: 700;
    color: #2A66EA;
   border-bottom: 4rpx solid #2A66EA;
  }

     
export default class Web extends wepy.page {
  data = {
    selTab:'1',//当前选中的tab id
    tablist:[{name:'柜体产线',id:1,},{name:'门板产线',id:2},{name:'背板产线',id:3},{name:'木工产线',id:4},{name:'五金产线',id:5}],
  }

  methods = {
 tab_click(e){
            var id = e.currentTarget.dataset.id
             this.selTab=id
            this.$apply()
      },
  }