移动端局部出现横向滚动效果
<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;