使用 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

我嘗試解決您的問題，請查看此處