使用Tailwind CSS实现导航内容单行显示问题求助

我的导航项出现了换行问题，希望所有导航项保持在同一行显示，尝试过的方法均无效，恳请提供解决方案。

以下是我的实现代码：

<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>;

针对你的导航换行问题，可尝试以下几个调整方案：

• 替换对齐方式并统一间距：
  当前justify-between会让元素分散对齐，容器宽度不足时极易触发换行。改用flex-nowrap强制禁止换行，同时用space-x-*类统一控制导航项之间的间距，替代零散的pr-*样式：

  <ul className="md:flex hidden flex-nowrap items-center h-20 pb-5 duration-500 space-x-6">
    <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">
      <CustomLink to="/Service">SERVICE</CustomLink>
    </li>
    <li className="cursor-pointer capitalize">
      <CustomLink to="/Beratung">BERATUNG</CustomLink>
    </li>
    <li className="cursor-pointer capitalize">
      <CustomLink to="/Referenzen">REFERENZEN</CustomLink>
    </li>
    <li className="cursor-pointer capitalize">
      <CustomLink to="/Kontakt">KONTAKT</CustomLink>
    </li>
  </ul>;
  

• 固定容器最小宽度（可选）：
  如果导航项总宽度固定，给ul添加min-w-[xxxpx]（比如min-w-[800px]），确保容器有足够宽度容纳所有项：

  <ul className="md:flex hidden flex-nowrap items-center h-20 pb-5 duration-500 space-x-6 min-w-[800px]">
    {/* 导航项内容 */}
  </ul>;
  

• 小屏横向滚动适配（可选）：
  如果希望在md以下的小屏幕也保持不换行，可将md:flex改为flex，同时添加overflow-x-auto让导航支持横向滚动：

  <ul className="flex flex-nowrap items-center h-20 pb-5 duration-500 space-x-6 overflow-x-auto">
    {/* 导航项内容 */}
  </ul>;
  

内容的提问来源于stack exchange，提问作者laalaaala