内容溢出时的 Tailwind CSS 水平滚动

Posted 2023-03-06

【中文标题】内容溢出时的 Tailwind CSS 水平滚动

【英文标题】：Tailwind CSS horizontal scrolling when content overflows

【发布时间】：2021-07-25 03:02:55

【问题描述】：

使用 Tailwind CSS，我想在内容太大而无法适应屏幕宽度时应用滚动效果。我有一个包含要滚动的子元素的 div 容器。当我使用一个部分来保存图像和用户名（如下所示）时，它们都会缩小以适应屏幕尺寸。这不是我想要的。我希望只显示几个部分，其余部分在滚动时显示。我错过了什么？

不工作

<div class="flex overflow-x-auto space-x-8">
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" ></span>
   <span>John</span>
</section>
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" ></span>
   <span>John</span>
</section>
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" ></span>
   <span>John</span>
</section> 
</div>

如果我像下面这样说，它可以工作，但我不希望这样。

<div class="flex overflow-x-auto space-x-5"> 
      <img src="download.jfif" class="h-10 w-10 rounded-full" >
      <img src="download.jfif" class="h-10 w-10 rounded-full" >    
      <img src="download.jfif" class="h-10 w-10 rounded-full" >    
      <img src="download.jfif" class="h-10 w-10 rounded-full" >    
      <img src="download.jfif" class="h-10 w-10 rounded-full" >
      <img src="download.jfif" class="h-10 w-10 rounded-full" >    
      <img src="download.jfif" class="h-10 w-10 rounded-full" >    
</div>

【问题讨论】：

its working but it's not want it this way 为什么？它有什么问题？

【参考方案1】：

首先，13 不是高度/宽度的有效值。 (https://tailwindcss.com/docs/height) 这可能会导致您的一些问题。

您可以将flex-shrink-0 放在所有section 元素上，以防止图像缩小而不是滚动。

但是当您将section 的固定宽度定义为与图像相同时，您还将获得垂直滚动。

查看以下示例：

<link href="https://unpkg.com/tailwindcss@2.1.1/dist/tailwind.min.css" rel="stylesheet" />

<div class="flex overflow-x-auto space-x-8 w-1/2 bg-red-200">
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300"  /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300"  /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300"  /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300"  /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300"  /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300"  /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300"  /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300"  /></span>
    <span>John</span>
  </section>
</div>

https://play.tailwindcss.com/4B5d6ne1s5