如何用Tailwind CSS使邮箱输入框宽度匹配姓名输入框总和

解决方案 #

要让邮箱输入框宽度等于名字+姓氏输入框加间隙的总宽度，直接通过Tailwind的弹性布局就能实现自适应匹配，不用设置固定宽度：

1. 新增统一宽度的父容器：把邮箱输入框和包含名字、姓氏的flex容器放到同一个父容器里，以此作为宽度基准。
2. 邮箱输入框设为100%宽度：给邮箱输入框加w-full类，使其宽度完全匹配父容器。
3. 名字、姓氏输入框平分空间：给两个输入框加flex-1类，让它们自动平分父容器的可用空间，配合gap-2的间隙，总宽度刚好和邮箱输入框对齐。

修改后的完整代码：

return (
    <div className="flex flex-col items-center justify-center py-10">
       <h1 className="text-xl font-bold mb-5">
        Create your personal account
       </h1>
       <hr className="w-full mb-4"/>
       {/* 统一宽度的父容器，max-w-md可按需调整最大宽度 */}
       <div className="w-full max-w-md">
           <label htmlFor="email"></label>
           <input className="border border-black p-3 outline-none mb-4 w-full"
              id="email"
              type="email"
              value={user.email}
              onChange={(e) => setUser({...user, email: e.target.value})}
              placeholder="E-mail address"
            />
            <div className="flex gap-2">
              <label htmlFor="firstName"></label>
              <input className="border border-black p-3 outline-none mb-4 flex-1"
                  id="firstName"
                  type="text"
                  value={user.firstName}
                  onChange={(e) => setUser({...user, firstName: e.target.value})}
                  placeholder="First Name"
                />
              <label htmlFor="lastName"></label>
              <input className="border border-black p-3 outline-none mb-4 flex-1"
                  id="lastName"
                  type="text"
                  value={user.lastName}
                  onChange={(e) => setUser({...user, lastName: e.target.value})}
                  placeholder="Last Name"
                />
            </div>
       </div>
    </div>
);

关键细节 #

• w-full max-w-md：限制父容器的最大宽度，避免输入框在大屏上过度拉伸，同时小屏上自动适配宽度。
• flex-1：确保名字和姓氏输入框始终平分可用空间，无论容器宽度如何变化，两者宽度保持一致。
• w-full：让邮箱输入框完全继承父容器宽度，自然和下方名字+姓氏+间隙的总宽度对齐。

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