TabsTrigger横向排列问题求助：P2P消息应用开发遇UI布局难题

你的问题核心是TabsTrigger上的w-full类强制每个标签占满整行，加上父容器没有启用横向布局，所以才会上下堆叠。按以下步骤修改即可实现目标效果：

1. 给包裹两个TabsTrigger的父容器（比如Radix UI的<TabsList>）添加flex类，开启横向布局：

<TabsList className="flex">
  {/* 两个TabsTrigger放在这里 */}
</TabsList>

2. 修改TabsTrigger的className，移除w-full；如果需要两个标签平分容器宽度，替换成flex-1：

<TabsTrigger value="login" className="data-[state=active]:bg-transparent text-black text-opacity-90 border-b-2 rounded-none flex-1 data-[state=active]:text-black data-[state=active]:font-semibold data-[state=active]:border-b-purple-500 p-3 transition-all duration-300">Login</TabsTrigger>

<TabsTrigger value="signup" className="data-[state=active]:bg-transparent text-black text-opacity-90 border-b-2 rounded-none flex-1 data-[state=active]:text-black data-[state=active]:font-semibold data-[state=active]:border-b-purple-500 p-3 transition-all duration-300">Signup</TabsTrigger>

这样修改后，两个标签会横向排列；用flex-1能保证它们平分容器宽度，激活状态的下划线也能正常显示。如果不需要平分宽度，直接去掉w-full即可，标签会根据内容自适应宽度。

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