css 不水平滚动

Question

我正在使用 tailwind css 来设置样式。
是在下面url看yutube实现的。在视频进行到大约 29 分 30 秒时，我将 overflow-x-auto 应用到 div 标签以使其水平滚动。我也用同样的方法应用了overflow-x-auto，但是它没有水平滚动。

https://www.youtube.com/watch?v=u2jiRjyUbwA&t=176s

export default function Home() {
  const categories = [
    `Woman's Running Shoes`,
    `Everyday Sneakers`,
    `Slip-Ons`,
    `High Tops`,
    `Boat Shoes`,
    `Flats`,
    `Whether Repellent Shoes`,
    `Woman's Running Shoes`,
  ];
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="px-4 py-1 bg-lime-800 text-white">
        <p className="text-xs font-midium text-center">
          We're raising prices on all products by  today in support of the
          planet.{" "}
          <a href="#" className="underline">
            Learn More
          </a>
        </p>
      </div>
      <header className="px-4 py-4 flex item-center justify-between bg-white">
        <div className="absolute inset-0 shadow-lg opacity-50" />
        <div className="flex">
          <button className="h-8 w-8">
            <svg
              class="w-6 h-6"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                clip-rule="evenodd"
              ></path>
            </svg>
          </button>
        </div>
        <div className="flex">Logo</div>
        <div className="flex">
          <button className="h-8 w-8">
            <svg
              class="w-6 h-6"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
            </svg>
          </button>
        </div>
      </header>
      <main>
        <div className="flex items-center justify-between px-8 py-4">
          <div>
            <div className="text-xs font-medium text-gray-900 space-x-1">
              <a href="#" className="underline">
                Home
              </a>
              <span>/</span>
            </div>
            <div className="">Women's Shoes</div>
          </div>
          <div className="flex">
            <button className="h-6 w-6">
              <svg
                className="transform rotate-90"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2  2 0  0 010-3.464V4a1 1 0 011-1z"></path>
              </svg>
            </button>
          </div>
        </div>
        <div className="bg-gray-100 px-8 py-3 overflow-x-auto">
          <div className="text-sm flex space-x-4">
            {categories.map((category) => (
              <a href="#" className="text-gray-400 whitespace-nowrap">
                {category}
              </a>
            ))}
          </div>
        </div>
      </main>
    </div>
  );
}

Answer 1

您有一个带有 absolute 的元素位于所有元素之上（<header> 元素的第一个子元素）。

<div className="absolute inset-0 shadow-lg opacity-50" />

删除元素（或 absolute）将允许您与滚动条交互。

css 不水平滚动

css not scrolling horizontally

css

reactjs

tailwind-css