使用 Tailwind CSS 的 DIV 对齐

Question

我有两个 **div**：一个用于徽标，另一个用于菜单，它们使用 **flex** 对齐。
当我开始减小屏幕尺寸时，菜单 **div** 开始缩小，直到某个时候，菜单项（关于我们）之一丢失 alignment。
然后 logo-**div** 开始缩小，直到菜单消失。 请建议，我怎样才能保持菜单项（关于我们）内联，直到菜单完全消失，我怎样才能让 logo-**div** 在菜单不可见时占据全宽并居中？

屏幕可视化：

HTML 代码：

 <nav class="item-center flex items-center"> <div class="bg-red-100 pl-5 py-1"> <a href="#"><img src="img/logo.svg" alt="Logo"></a> </div> <div class="flex-1"> <ul class="hidden sm:flex bg-blue-200 justify-end gap-12 text-red-500 uppercase text-s pr-5"> <li class="cursor-pointer ">Features </li> <li class="cursor-pointer ">Products </li> <li class="cursor-pointer ">Services </li> <li class="cursor-pointer ">About us </li> <li class="cursor-pointer ">Contact </li> </ul> </div> </nav>

Answer 1

我会在about us部分使用whitespace-nowrap class ，我首先想到的标志是为其添加最小宽度，然后flex grow ，这样它就不能 go 低于一定宽度并且一旦菜单消失它长到全宽。

Answer 2

关于包装

    <li class="cursor-pointer whitespace-nowrap">About us </li>

关于小屏幕检查https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint和

    <div class="flex bg-red-100 pl-5 py-1 sm:pl-0 sm:w-full sm:justify-center">
  <a href="#"><img src="img/logo.svg" alt="Logo"></a>
</div>

Answer 3

我尝试解决您的问题，请查看此处