使用尾风CSS的导航内容包装

Question

嘿，伙计们，我的问题在照片上很明显。我希望我的导航项目保持在一条线上，而不是进入2。我尝试过的都不起作用。有什么想法吗？

这就是问题所在

    <ul className="md:flex hidden justify-between items-center h-20 pb-5 duration-500">
      <li className="cursor-pointer capitalize ">
        <CustomLink to="/">HOME</CustomLink>
      </li>
      <li className="cursor-pointer capitalize ">
        <CustomLink to="/Uberuns">ÜBER UNS</CustomLink>
      </li>
      <li className="cursor-pointer capitalize pr-2">
        <CustomLink to="/Service">SERVICE</CustomLink>
      </li>
      <li className="cursor-pointer capitalize pr-6">
        <CustomLink to="/Beratung">BERATUNG</CustomLink>
      </li>
      <li className="cursor-pointer capitalize pr-6">
        <CustomLink to="/Referenzen">REFERENZEN</CustomLink>
      </li>
      <li className="cursor-pointer capitalize">
        <CustomLink to="/Kontakt">KONTAKT</CustomLink>
      </li>
    </ul>;

Answer 1

您可以使用whitespace-nowrap。

    <ul className="md:flex hidden justify-between items-center h-20 pb-5 duration-500">
      <li className="cursor-pointer capitalize "><CustomLink to="/">HOME</CustomLink></li>
      <li className="cursor-pointer capitalize whitespace-nowrap"><CustomLink to="/Uberuns">ÜBER UNS</CustomLink></li>
      <li className="cursor-pointer capitalize pr-2"><CustomLink to="/Service">SERVICE</CustomLink></li>
      <li className="cursor-pointer capitalize pr-6"><CustomLink to="/Beratung">BERATUNG</CustomLink></li>
      <li className="cursor-pointer capitalize pr-6"><CustomLink to="/Referenzen">REFERENZEN</CustomLink></li>
      <li className="cursor-pointer capitalize"><CustomLink to="/Kontakt">KONTAKT</CustomLink></li>
    </ul>

下面是一个演示：

https://play.tailwindcss.com/TcAbgSgIPV?layout=horizontal