在与尾翼反应时，将肚脐移到同一行。

Question

嘿，伙计们，我有一个问题，我想让肚脐在同行的img，但它显示我所有的水平，所以库斯通链接必须移动到同一行也垂直。有什么想法吗？

    <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="justify-between items-center ">
      <li className="cursor-pointer capitalize font-medium h-20 px-4 text-gray-500 duration-200">
        <CustomLink to="/">HOME</CustomLink>
        <CustomLink to="/Uberuns">ÜBER UNS</CustomLink>
        <CustomLink to="/Service">SERVICE</CustomLink>
        <CustomLink to="/Beratung">BERATUNG</CustomLink>
        <CustomLink to="/Referenzen">REFERENZEN</CustomLink>
        <CustomLink to="/Kontakt">KONTAKT</CustomLink>
      </li>
    </ul>
  </div>

Answer 1

因为包装div是flex，所以它只有一个子组件，<ul>组件，它也有一个子组件，即单个<li>。如果您想在左边有一个像图像这样的导航条，那么右边的导航项就可以这样做。

<nav className="flex justify-between w-full">
  <Image /> // whatever wrapping component you want to use

  <ul className="md:flex hidden justify-between items-center">
    <li className="cursor-pointer capitalize"> Link 1 </li>
    <li className="cursor-pointer capitalize"> Link 2 </li>
  </ul>

</nav>

主要的外卖，我认为，是挠曲只影响其直接的孩子。