React+TailwindCSS实现导航栏与图片同行布局问题求助

你的问题出在导航栏右侧的链接列表未设置正确的Flex布局，且所有CustomLink嵌套在同一个<li>标签内，导致垂直排列。以下是修复步骤和代码：

核心问题点 #

• <ul>标签未添加flex类，无法让子元素横向排列
• 所有CustomLink集中在单个<li>中，自然会垂直堆叠

修复后的代码 #

<nav className="bg-black flex justify-between w-full h-20 items-center gap-8 pr-8 fixed">
  <Link to="/" className="text-6xl p-5">
    <img src={QTech} alt="QTech"/>
  </Link>

  <div className="hidden md:flex">
    <ul className="flex justify-between items-center gap-6"> {/* 添加flex和间距控制 */}
      {/* 每个CustomLink单独放在<li>中 */}
      <li className="cursor-pointer capitalize font-medium h-20 px-4 text-gray-500 duration-200 flex items-center">
        <CustomLink to="/">HOME</CustomLink>
      </li>
      <li className="cursor-pointer capitalize font-medium h-20 px-4 text-gray-500 duration-200 flex items-center">
        <CustomLink to="/Uberuns">ÜBER UNS</CustomLink>
      </li>
      <li className="cursor-pointer capitalize font-medium h-20 px-4 text-gray-500 duration-200 flex items-center">
        <CustomLink to="/Service">SERVICE</CustomLink>
      </li>
      <li className="cursor-pointer capitalize font-medium h-20 px-4 text-gray-500 duration-200 flex items-center">
        <CustomLink to="/Beratung">BERATUNG</CustomLink>
      </li>
      <li className="cursor-pointer capitalize font-medium h-20 px-4 text-gray-500 duration-200 flex items-center">
        <CustomLink to="/Referenzen">REFERENZEN</CustomLink>
      </li>
      <li className="cursor-pointer capitalize font-medium h-20 px-4 text-gray-500 duration-200 flex items-center">
        <CustomLink to="/Kontakt">KONTAKT</CustomLink>
      </li>
    </ul>
  </div>
</nav>

关键改动说明 #

• 给<ul>添加flex类，让子元素横向排列，同时用gap-6控制链接间的间距
• 将每个CustomLink拆分到独立的<li>标签中，确保每个链接是独立的横向项
• 给每个<li>添加flex items-center，让链接在li内垂直居中，和左侧图片的对齐方式保持一致

修改后，导航栏的图片和所有CustomLink会保持在同一行，且链接横向均匀分布。

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