reactjs 无法在同一行上获得跨度- Tailwind CSS

k10s72fa 于 2023-04-29 发布在 React

关注(0)|答案(1)|浏览(119)

我有一个标题<h1>，其中的一个单词有一个自定义样式，我在单独的CSS文件中定义了它。因此，我将这个单词 Package 在<span>中，但这样我就不能让它保持在同一行上。我试过flex-nowrap，inline-flex，inline-block，但这些都不起作用。
结果：

预期输出：

我试过flex-nowrap，inline-flex，inline-block，chat gpt，Tailwind documentation。

<header className="max-w-[1420px] mx-auto pb-[130px] flex flex-col lg:pl-[240px] py-[50px] space-x-1  lg:flex-row relative items-center [&_*]:text-white w-full">
  <div className="flex w-[80vw] lg:w-[70vw]">
    <div className="flex flex-col justify-center">
      <h1 class="tracking-[1px] w-[100%] text-center lg:text-left mx-auto -mt-10_disabled lg:mt-0 text-white_disabled lg:w-[534px] text-[35px] lg:text-[55px] mb-2 font-extrabold whitespace-normal lg:whitespace-nowrap">
        A Safe place <br /> to join the
        <span class="gradient-text inline-block lg:inline-block tracking-[1px] text-[37px] lg:text-[57px] whitespace-nowrap">
          &nbsp;best
        </span>
              <span class="text-white_disabled inline-block text-[35px] lg:text-[55px] mb-2 font-extrabold whitespace-nowrap">
          .
        </span>
      </h1>

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

reactjs

来源：https://stackoverflow.com/questions/76103674/cant-get-a-span-on-the-same-line-tailwind-css

1条答案

按热度按时间

yquaqz181#

谢谢你们试图帮助：）我最终找到了解决我的问题的办法！这就是：我将每个元素 Package 在span中，然后将我的父容器h1设置为flex，flex-nowrap，它就在这里。我将br/放在我想要的位置，它可以正常工作。不移动任何屏幕尺寸。

<h1 className="tracking-[1px] flex flex-col justify-center lg:justify-start w-[100%] text-center lg:text-left mx-auto -mt-10 lg:mt-0 text-white lg:w-[534px] text-[35px] lg:text-[55px] mb-2 font-extrabold whitespace-normal lg:whitespace-nowrap">
            <span>A Safe place</span>
            <div className="flex flex-nowrap justify-center lg:justify-start whitespace-nowrap">
              <span>to join the</span>
              <span className="gradient-text font-extrabold tracking-[1px] pr-1 whitespace-nowrap text-[35px] lg:text-[55px]">
                &nbsp;best
              </span>
              <span className="text-white text-[35px] lg:text-[55px] mb-2 font-extrabold whitespace-nowrap">
                .
              </span>
            </div>
          </h1>

赞(0）回复(0）举报 2023-04-29

我来回答

reactjs 无法在同一行上获得跨度- Tailwind CSS

1条答案

相关问题

热门标签

最新问答