求助：React+Tailwind导航栏垂直且偶现消失，求水平布局修改方案

架构老林

2026-6-28

修复React + Tailwind导航栏水平布局及消失问题

你的代码里有几个明显问题导致导航栏无法水平排列甚至偶尔消失，直接修改方案如下：

问题点及修改说明：

原代码中py -20是无效的Tailwind类（空格分隔导致解析错误），就算是py-20，超大内边距也会让导航栏内容超出视口，换成合理的py-4；
包裹导航菜单的<div>没设置垂直居中，添加flex items-center让菜单和左侧logo对齐；
h-10vh在小屏幕可能高度不足，换成h-auto配合内边距自适应，避免内容被截断；
给<ul>添加items-center，确保菜单项垂直居中，可按需调整gap大小。

修改后的完整代码：

const Navbar = () => {
  return (
    <nav className="z-50 bg-white">
      <div className="h-auto flex justify-between lg:py-5 px-6 lg:px-20 py-4 border-b">
        <div className="flex items-center flex-1">
          <h2 className="text-3xl font-bold text-pink-500">BOWANA</h2>
        </div>
        <div className="flex items-center">
          <ul className="flex gap-6 lg:gap-8 text-[18px] items-center">
            <Link to="/"><li>Home</li></Link>
            <Link to="/"><li>Blogs</li></Link>
            <Link to="/"><li>Services</li></Link>
            <Link to="/"><li>Book An Appointment</li></Link>
            <Link to="/"><li>Contact Us</li></Link>
          </ul>
        </div>
      </div>
    </nav>
  );
};
export default Navbar;