移动端H5局部出现横向滚动效果，纯css效果

移动端局部出现横向滚动效果

<div
        class="
          flex
          items-center
          justify-between
          overflow-x-scroll
          leading-36
        "
      >
        <span
          v-for="item in categoryList"
          :key="item.id"
          class="
            mr-24
            text-16 text-3D
            font-medium
            inline-block
            whitespace-nowrap
          "
          >{{ item.name }}</span
        >
      </div>

用的tailwind里面的样式，需要的自取
方法一：
父级设置flex布局和overflow-x-scroll，子元素设置inline-block和whitespace-nowrap；
方法二：
父级设置overflow-x:auto;white-space: nowrap;，子元素设置display: inline-table;