我在next.js 13中做了一些项目。这是我的代码的一部分,我试图实现滚动条使用顺风css。
<div className="flex w-[1020px] p-4 overflow-x-scroll">
<div
className={` w-[300px] h-[300px] self-center relative`}
onClick={() =>
window.open("https://sagarmathamis.netlify.app/", "_blank")
}
>
<Image src={mis} alt="" layout="fill"></Image>
</div>
<div
className={` w-[300px] h-[300px] self-center relative`}
onClick={() =>
window.open("https://revampnewsportal.netlify.app/", "_blank")
}
>
<Image src={newsportal} alt="" layout="fill"></Image>
</div>
<div
className={` w-[300px] h-[300px] self-center relative `}
onClick={() =>
window.open("https://onlinesstores.netlify.app/", "_blank")
}
>
<Image src={onlinestore} alt="" layout="fill"></Image>
</div>
<div
className={` w-[300px] h-[300px] self-center relative`}
onClick={() =>
window.open("https://searcheproducts.netlify.app/", "_blank")
}
>
<Image src={searchproduct} alt="" layout="fill"></Image>
</div>
<div
className={`bg-teal-500 w-[300px] h-[300px] self-center`}
onClick={() =>
window.open(
"https://www.linkedin.com/in/roshan-ojha-78832a1aa/",
"_blank"
)
}
></div>
<div
className={`bg-red-500 w-[300px] h-[300px] self-center`}
onClick={() =>
window.open(
"https://www.linkedin.com/in/roshan-ojha-78832a1aa/",
"_blank"
)
}
></div>
<div
className={`bg-green-500 w-[300px] h-[300px] self-center`}
onClick={() =>
window.open(
"https://www.linkedin.com/in/roshan-ojha-78832a1aa/",
"_blank"
)
}
></div>
<div
className={`bg-blue-500 w-[300px] h-[300px] self-center`}
onClick={() =>
window.open(
"https://www.linkedin.com/in/roshan-ojha-78832a1aa/",
"_blank"
)
}
></div>
</div>
字符串
但滚动条不显示。div的所有元素都被压缩在父(1020px)div中,如图所示
的数据
我该怎么做才能让它可滚动?请帮帮忙。
1条答案
按热度按时间8mmmxcuj1#
通过
shrink-0
实用程序类将flex-shrink: 0
应用于flex子对象:字符串