使用TailwindCSS实现左上角Logo与右上角菜单布局问题

问题出在你的菜单和Logo被包裹在同一个flex容器中，导致它们始终并排显示，nav上的justify-between属性因为只有一个子元素无法生效。

修改方案：将菜单从Logo所在的div中移出，作为nav的第二个子元素，利用nav的flex justify-between实现左右分布：

<div className="isolate">
    <div className="px-6 pt-6 lg:px-8">
        <div>
            <nav
                className="flex h-9 items-center justify-between"
                aria-label="Global"
            >
                <!-- Logo 容器 -->
                <div
                    className="flex lg:min-w-0 lg:flex-1"
                    aria-label="Global"
                >
                    <a href="/" className="-m-1.5 p-1.5">
                        <span className="sr-only">This Company Name</span>
                        <img
                            className="h-8"
                            src="/this-company-logo.png"
                            alt="This Company Name"
                        />
                    </a>
                </div>
                <!-- 菜单容器 -->
                <div className="flex items-center">
                    <ul className="flex gap-6">
                        <li><a href="">Home</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>

关键修改点：

• 将<ul>从Logo所在的div中分离，放到nav的独立子div里
• 给菜单容器添加flex items-center，让菜单垂直居中对齐Logo
• 给<ul>添加flex gap-6，让菜单项横向排列并保持间距

这样nav的justify-between会自动将Logo容器推到左侧，菜单容器推到右侧，实现你想要的布局。

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