React JS中如何将按钮调整至文本下方？

问题出在你给外层容器用了flex flex-row横向布局，导致元素横向排列。只需调整Tailwind的flex方向类，同时修正一处语法错误即可：

修改点： #

• 将flex flex-row改为flex flex-col，切换为垂直弹性布局
• 把错误的max-w-{100px}改成max-w-[100px]，这是Tailwind自定义数值的正确写法

修改后的代码： #

<div className="font-secondary text-xs md:text-base max-w-[100px] flex flex-col items-center gap-2 bg-white rounded-xl px-5 py-4 text-content-button font-bold hover:opacity-70 duration-300">
  {/* 把需要放在上方的文本元素放在这里 */}
  <span>你的前置文本</span>
  <Button href={LINKS.application} target="_self" external>
    Get Platinum access now!
  </Button>
</div>

补充说明： #

• flex-col会让容器内的子元素从上到下依次排列，自然实现按钮在文本下方的效果
• items-center可以保持元素水平居中，如果需要左对齐，换成items-start即可
• gap-2会维持元素之间的垂直间距，避免堆叠在一起

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