[英]Scroll in TailwindCss
I have a problem with horozontal scroll in tailwind css (not scroll):我在顺风 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>
Your parent element must either have a set width
or max-width
in order for overflow to work .您的父元素必须具有设置
width
或max-width
才能使溢出起作用。 You can use tailwind's max width utility class to add a max-width
to the parent element as follows:您可以使用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>
You can replace overflow-x-scroll
instead of overflow-x-auto
and make the width somewhat smaller so that you can see the scroll behavior with 2-3 items only.您可以替换
overflow-x-scroll
而不是overflow-x-auto
并使宽度稍小一些,以便您可以看到只有 2-3 个项目的滚动行为。
Below is the code you can check,以下是您可以检查的代码,
<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>
I had added 5-6 tags manually instead of for loop.
我手动添加了 5-6 个标签,而不是 for 循环。 Check in full view
查看完整视图
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.