Next.js + Tailwind 实现元素水平排列而非垂直分布

你的核心问题是两个子容器的总宽度超过了父容器的可用宽度，导致flex容器自动换行，最终呈现垂直分布。以下是具体的修复方案：

方案1：调整Flex布局参数 #

修改子元素宽度并添加水平间距，确保总宽度不超出父容器：

<div className="bg-grey w-screen h-screen m-10 shadow-lg"> {/* Background*/}
  <div className="flex justify-center gap-6"> {/* 添加gap控制水平间距 */}
    <div className="bg-white w-1/2 h-1/4 rounded-2xl overflow-hidden shadow-lg"> {/* 调整宽度为1/2 */}
      <InputForm/>
    </div>
    <div className="bg-white w-1/2 h-1/4 p-5 rounded-2xl overflow-hidden shadow-lg"> {/* 缩小内边距避免撑爆容器 */}
      <ValueChart/>
    </div>
  </div>
</div>

关键调整点：

• 将w-3/4改为w-1/2，两个子元素总宽度刚好适配父容器（加上gap-6的间距也不会溢出）
• 用gap-6替代mb-50（Tailwind无mb-50类，且mb是垂直间距，不适合水平排列场景）
• 缩小p-20为合理值（比如p-5），避免内边距过大导致容器宽度溢出

方案2：使用Grid布局实现两列排列 #

如果更倾向于Grid，可直接设置两列布局：

<div className="bg-grey w-screen h-screen m-10 shadow-lg"> {/* Background*/}
  <div className="grid grid-cols-2 gap-6 w-full px-10"> {/* 两列网格 + 水平间距 */}
    <div className="bg-white h-1/4 rounded-2xl overflow-hidden shadow-lg"> {/* 自动占满列宽 */}
      <InputForm/>
    </div>
    <div className="bg-white h-1/4 p-5 rounded-2xl overflow-hidden shadow-lg"> {/* 自动占满列宽 */}
      <ValueChart/>
    </div>
  </div>
</div>

关键调整点：

• grid-cols-2直接将父容器分为等宽的两列
• 子元素无需手动设置宽度，默认占满所在列的可用空间
• px-10给网格容器添加左右内边距，避免卡片贴边

额外注意事项 #

• w-screen + m-10会导致容器超出视口出现横向滚动条，可改为w-full max-w-screen-xl mx-auto优化布局
• 如果卡片内容可能溢出，可给子容器添加overflow-auto类，避免内容被截断

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