无法在next.js中使用tailwind实现可滚动13

m1m5dgzv  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(107)

我在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中,如图所示


的数据
我该怎么做才能让它可滚动?请帮帮忙。

8mmmxcuj

8mmmxcuj1#

通过shrink-0实用程序类将flex-shrink: 0应用于flex子对象:

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="flex w-[1020px]  p-4 overflow-x-scroll">
  <div class="w-[300px] h-[300px] self-center relative shrink-0">
    <img src="https://picsum.photos/300/300" alt="" style="position: absolute; height: 100%; width: 100%; inset: 0px; object-fit: cover; color: transparent;" />
  </div>
  <div class="w-[300px] h-[300px] self-center relative shrink-0">
    <img src="https://picsum.photos/300/300?" alt="" style="position: absolute; height: 100%; width: 100%; inset: 0px; object-fit: cover; color: transparent;" />
  </div>
  <div class="w-[300px] h-[300px] self-center relative shrink-0">
    <img src="https://picsum.photos/300/300?0" alt="" style="position: absolute; height: 100%; width: 100%; inset: 0px; object-fit: cover; color: transparent;" />
  </div>
  <div class="w-[300px] h-[300px] self-center relative shrink-0">
    <img src="https://picsum.photos/300/300?2" alt="" style="position: absolute; height: 100%; width: 100%; inset: 0px; object-fit: cover; color: transparent;" />
  </div>
  <div class="bg-teal-500 w-[300px] h-[300px] self-center shrink-0"></div>
  <div class="bg-red-500 w-[300px] h-[300px] self-center shrink-0"></div>
  <div class="bg-green-500 w-[300px] h-[300px] self-center shrink-0"></div>
  <div class="bg-blue-500 w-[300px] h-[300px] self-center shrink-0"></div>
</div>

字符串

相关问题