Tailwind CSS：absolute定位容器内justify-between失效问题求助

核心问题 #

1. <p>标签的限制：<p>属于行内块元素，默认宽度由内部内容撑开，而且HTML规范不允许<p>嵌套<div>这类块级元素，这直接导致你的flex容器没有足够横向空间，justify-between自然无法生效。
2. absolute定位的宽度缺失：设置absolute的元素若未显式指定宽度，会自动收缩到内容宽度，进一步让justify-between失去作用的空间。

修复方案 #

• 把包裹导航的<p>替换成<div>（符合HTML语义，避免浏览器默认样式干扰）；
• 给导航的absolute容器添加w-full，让它占满父容器宽度，给justify-between提供生效空间；
• 确保flex容器本身也铺满宽度（保持w-full）。

修正后的导航栏代码 #

<div className='absolute top-0 w-full'>
  <div className='flex justify-between w-full'>
    <div className='text-3xl p-2'>Logo</div>
    <div className='text-3xl p-2'>Menu</div>
    <div className='text-3xl p-2'>Menu2</div>
  </div>
</div>

完整页面修正代码（参考） #

<div className='container max-w-full'>
  <div className='h-screen w-full relative'> <!-- 给父容器加relative，让内部absolute元素基于它定位 -->
    <div className="absolute inset-0 -z-1"> <!-- 图片容器改为absolute，占满父容器 -->
      <Image 
        src={banner} 
        alt="ic"
        sizes="100vw"                       
        className="w-full h-full object-cover opacity-50" <!-- 用object-cover确保图片铺满屏幕 -->
      />
    </div>
    <h2 className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-slate-700'>
      <div className='flex flex-col space-y-5 justify-center items-center text-center'>
        <div className='text-7xl font-bold'>Title</div>
        <div className='text-7xl'>Title text</div>
        <button className='text-2xl bg-sky-700 text-white px-10 py-5 rounded-lg'>Explore</button>
      </div>
    </h2>
    <!-- 修正后的导航栏 -->
    <div className='absolute top-0 w-full'>
      <div className='flex justify-between w-full'>
        <div className='text-3xl p-2'>Logo</div>
        <div className='text-3xl p-2'>Menu</div>
        <div className='text-3xl p-2'>Menu2</div>
      </div>
    </div>
  </div>
</div>        

额外说明：

• 原图片容器的w-max会限制宽度，改成absolute inset-0让它铺满整个屏幕容器，配合object-cover让图片适配屏幕大小；
• 给最外层的h-screen容器添加relative，确保所有absolute定位的元素都基于它定位，避免出现偏移问题。

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