在 TailwindCss 中滾動

Question

我在順風 css（不是滾動）中遇到水平滾動問題：

<div class="flex  items-center mb-10 overflow-x-auto  flex-none carousel pr-10 
            opacity-at-end  mt-16 flex-row-reverse">
  <?php $tags = $data->tags; ?> @foreach ($tags as $tag)
  <a class=" flex-none">
  </a>
  <a class="active bg-white tertiary-color fs-18 fw-400 radius rounded-[30px] 
            pt-4 pb-3 px-5 min-h-[44px] text-center ml-5 flex-none">
    {{ $tag->name }}
  </a> @endforeach
</div>

Answer 1

您的父元素必須具有設置width或max-width才能使溢出起作用。 您可以使用tailwind 的最大寬度實用程序 class為父元素添加max-width ，如下所示：

<div class="max-w-md">
  <div class="flex items-center mb-10 overflow-x-auto flex-none carousel pr-10 opacity-at-end mt-16 flex-row-reverse">
    <?php $tags = $data->tags; ?> 
      @foreach ($tags as $tag)
        <a class=" flex-none"></a>
        <a class="active bg-white tertiary-color fs-18 fw-400 radius rounded-[30px] pt-4 pb-3 px-5 min-h-[44px] text-center ml-5 flex-none">
          {{ $tag->name }}
        </a>
      @endforeach
  </div>
</div>

Answer 2

您可以替換overflow-x-scroll而不是overflow-x-auto並使寬度稍小一些，以便您可以看到只有 2-3 個項目的滾動行為。

以下是您可以檢查的代碼，

 <script src="https://cdn.tailwindcss.com"></script> <div class="carousel opacity-at-end mx-auto mb-10 mt-16 flex w-1/2 flex-none flex-row-reverse items-center overflow-x-scroll bg-slate-300 p-4 pr-10"> <a class="flex-none"> </a> <a class="active tertiary-color fs-18 fw-400 radius ml-5 min-h-[44px] flex-none rounded-[30px] bg-slate-400 px-5 pt-4 pb-3 text-center"> $tag->name </a> <a class="flex-none"> </a> <a class="active tertiary-color fs-18 fw-400 radius ml-5 min-h-[44px] flex-none rounded-[30px] bg-slate-400 px-5 pt-4 pb-3 text-center"> $tag->name </a> <a class="flex-none"> </a> <a class="active tertiary-color fs-18 fw-400 radius ml-5 min-h-[44px] flex-none rounded-[30px] bg-slate-400 px-5 pt-4 pb-3 text-center"> $tag->name </a> <a class="flex-none"> </a> <a class="active tertiary-color fs-18 fw-400 radius ml-5 min-h-[44px] flex-none rounded-[30px] bg-slate-400 px-5 pt-4 pb-3 text-center"> $tag->name </a> <a class="flex-none"> </a> <a class="active tertiary-color fs-18 fw-400 radius ml-5 min-h-[44px] flex-none rounded-[30px] bg-slate-400 px-5 pt-4 pb-3 text-center"> $tag->name </a> a </div>

我手動添加了 5-6 個標簽，而不是 for 循環。 查看完整視圖