如何在Next.js中使用Tailwind实现Prada注册页的细黑色分隔线

AI 小北

2026-7-1

在Next.js中用Tailwind实现Prada注册页的按钮与文字分隔线

核心实现方案

直接在「NEXT」按钮和下方文字之间添加宽度适配、粗细为1px的黑色横线，结合Tailwind布局类保证视觉对齐：

export default function RegisterPage() {
  return (
    <div className="max-w-md mx-auto p-6">
      {/* NEXT按钮 */}
      <button className="w-full bg-black text-white py-3 px-4 mb-6">NEXT</button>
      
      {/* 细黑色分隔线 */}
      <div className="w-full h-[1px] bg-black mb-6"></div>
      
      {/* 下方说明文字 */}
      <p className="text-sm text-center">
        注册相关说明内容
      </p>
    </div>
  );
}

细节优化

间距控制：通过mb-6调整分隔线与上下元素的距离，可根据页面整体布局改为mb-4或my-5
宽度适配：w-full保证分隔线和按钮宽度完全一致，匹配原页面的视觉效果
线条粗细：h-[1px]精准还原Prada页面的细黑线样式

扩展：带中间文字的分隔线（若需）

如果需要类似「OR」的文字分隔效果，改用弹性布局实现：

<div className="flex items-center my-6">
  <div className="flex-grow h-[1px] bg-black"></div>
  <span className="mx-3 text-sm">OR</span>
  <div className="flex-grow h-[1px] bg-black"></div>
</div>