Tailwind CSS页脚导航居右失效问题求助

你的问题出在没利用好Flex布局的核心对齐属性，硬写固定间距和在Flex容器里用float-right根本不起作用，给你调整后的代码：

<footer className="bg-zinc-950 h-44 pl-20 pt-14 w-full">
  <Link href={'#'}>
    <Image className="mb-10" src="/lipologo.svg" alt="Lipo Logo" width={70} height={70}/>
  </Link>
  <div className="flex justify-between w-full">
    <h3 className="text-xs">© 2024 Lipo Creatives</h3>
    <div className="space-x-4 text-xs flex">
      <a href="#"><p>Home</p></a>
      <a href="#portfolio"><p>Portfolio</p></a>
      <a href="#about"><p>About</p></a>
      <a href="#contact"><p>Contact</p></a>
    </div>
  </div>
</footer>

关键改动说明：

• 给footer和内层flex容器加w-full，确保元素占满页面宽度，对齐逻辑才能生效
• 把内层flex的space-x-96换成justify-between，这个属性会让flex子元素自动分布在容器两端，左边留版权文字，右边自然就是导航栏
• 删掉无效的float-right，Flex布局里float属性完全不生效

如果需要给版权和导航设置最小间距，可以在flex容器里额外加gap-8（数值按需调整），和justify-between配合使用，既能保证两端对齐，又能控制最小间距。

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