Javascript 如何在react中水平对齐两行？

我正在制作一个react应用程序，我有几个列要映射到值，我想用字段值水平映射字段名。我尝试了下面的代码，但仍然有点不对齐

我的代码：

任务类：

  return (
    
    
    
  
    <div >
      <div>
        <a className="clientparams1">{task.clientName} </a>
      </div>
      <div>
        <a className="clientparams1">{task.clientId}</a>
      </div>
      <div>
        <a className="clientparams1">{task.clientSecret}</a>
      </div>
      <div>
        <a className="clientparams1">{task.status}</a>
      </div>
      <div>
        <a className="clientparams1">{task.generated_on}</a>
      </div>
      {/* <div>
        <FaTimes
          className="clientparams"
          style={{ color: "red", cursor: "pointer" }}
          onClick={() => onDelete(task.clientId)}
        />
      </div> */}
    </div>
    
   
  );
};

    export default Task;

有人能帮我吗

---

谢谢

在您的任务组件中，在.form1 div中，我做了两个div。在第一个div中，我添加了您的客户信息。在第二部分中，我添加了任务组件。这两个div分别有自己的类名client_容器和task_容器。它们的类名被赋予CSS属性

return (
    <div className="main_container>
     <div className="form1">
       <div className="client_container">
         <div>
         <a className="clientparams1">clientName</a>
         </div>
         <div>
         <a className="clientparams1">clientId</a>
         </div>
         <div>
         <a className="clientparams1">clientSecret</a>
         </div>
         <div>
         <a className="clientparams1">status</a>
         </div>
         <div>
         <a className="clientparams1">generated_on</a>
         </div>
       </div>
       <div className="task_container">
         {tasks.map((task, index) => (
           <Task key={index} task={task} onDelete={onDelete} />
         ))}
       </div>
    </div>
  )
}

---

您可以尝试这样的html表

<table>
  <tr>
    <th>clientName</th>
    <th>clientId</th>
    <th>clientSecret</th>
    <th>status</th>
    <th>generated_on</th>
    </tr>
  <tr>
    <td>{task.clientName}</td>
    <td>{task.clientId}</td>
    <td>{task.clientSecret}</td>
    <td>{task.status}</td>
    <td>{task.generated_on}</td>
  </tr>
</table>

客户名称
客户
客户秘密
地位
生成
{task.clientName}
{task.clientId}
{task.clientSecret}
{task.status}
{task.generated_on}

---

希望这能解决您的问题。

不起作用，您能修改我的代码吗？如果您想水平显示“添加表单”，则必须将“显示弹性”属性添加到其父级。在您的例子中，first div.still not wokring，我认为clientparams css classno有一个问题，我想要一个类似表格的结构，第一行有文件名，下一行有相应的值。不管怎样，谢谢您解决了这个问题

return (
    <div className="main_container>
     <div className="form1">
       <div className="client_container">
         <div>
         <a className="clientparams1">clientName</a>
         </div>
         <div>
         <a className="clientparams1">clientId</a>
         </div>
         <div>
         <a className="clientparams1">clientSecret</a>
         </div>
         <div>
         <a className="clientparams1">status</a>
         </div>
         <div>
         <a className="clientparams1">generated_on</a>
         </div>
       </div>
       <div className="task_container">
         {tasks.map((task, index) => (
           <Task key={index} task={task} onDelete={onDelete} />
         ))}
       </div>
    </div>
  )
}

.form1{
display: flex;
flex-direction: column;
}

.client_container{
display: flex;
}

.task_container{
display: flex;
}

<table>
  <tr>
    <th>clientName</th>
    <th>clientId</th>
    <th>clientSecret</th>
    <th>status</th>
    <th>generated_on</th>
    </tr>
  <tr>
    <td>{task.clientName}</td>
    <td>{task.clientId}</td>
    <td>{task.clientSecret}</td>
    <td>{task.status}</td>
    <td>{task.generated_on}</td>
  </tr>
</table>