我寫了這個代碼，但我不能將兩個不同標識類型的數據數組作為一個字段保存在一行中，我使用了這個代碼

import React from 'react'
import {Form,Field,ErrorMessage,Formik} from 'formik'
import * as yup from 'yup'

const schema=yup.object().shape({
    cmt:yup.string().min(4,'minimun 4 words').required('comment is reqired'),
    name:yup.string().required('Name is reqired'),
    email:yup.string().required('Email is reqired'),
    website:yup.string().required('Enter website url or name'),
})

function ReplyForm() {
    const data=[
        {type:'text',placeholder:'Write a comment',identiy:'cmt'},
        {type:'text',placeholder:'Name',identiy:'name'},
        {type:'email',placeholder:'Email',identiy:'email'},
        {type:'text',placeholder:'Website',identiy:'website'},
    ]
  return (
    <div className='w-full flex justify-center'>
        <div className='w-10/12 bg-blue-200'>
            <Formik
            initialValues={{
                cmt:'',
                name:'',
                email:'',
                website:'',
            }}
            validationSchema={schema}
            onSubmit={(values)=>{
                console.log(values)
            }}
            >
                {({handlesubmit})=>{
                    return <Form onSubmit={handlesubmit}>
                        <div className='w-3/5'>
                            {data.map((val,i)=>{
                                
                                    if ((val.identiy==='name')||(val.identiy==='email')){
                                       return <div key={i} className='flex justify-between'>
                                            <Field type={val.type} name={val.identiy} placeholder={val.placeholder} className='w-1/2'/>
                                        </div>
                                    }
                                    else{
                                        return <div key={i}>
                                        <Field type={val.type} name={val.identiy} placeholder={val.placeholder}/>
                                        </div>
                                    }
                            })}
                        </div>
                    </Form>
                }}
            </Formik>
            
        </div>

    </div>
  )
}

export default ReplyForm

它的輸出是這樣的

但實際上，我想要這樣的東西，其中姓名和電子郵件將在同一行，就像這樣

幫我把這兩個排成一行

Flex不是這樣的。你需要把名字和電子郵件放在一個flex里面，讓它們排成一行。 我認為你應該讓父節點有flex-wrap，子節點的寬度為100%，名稱和電子郵件的寬度為50%(如果flex有間隙或其他東西，讓它延伸到下一行，用calc或其他方法減小寬度)。 有一個例子

.container{
  width: 200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}
.item{
  width: 100%;
  background: #afc;
  height: 50px;
}
.item:nth-child(2),
.item:nth-child(3){
  width: calc(50% - 20px);
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>