如何在反应中水平对齐2行？

Question

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

我的代码：

任务类：

  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;

任务类：

它包含标题。

return (
    <div>
     <div className="form1">
    <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>
     
      {tasks.map((task, index) => (
        <Task key={index} task={task} onDelete={onDelete} />
      ))}
    </div>
  )
}

在这段代码中，我有一个父 div，其中有 2 个 div 标签，第一个 div 包含所有字段名称，第二个字段包含对应字段名称的所有值。

这是我在上面使用的css 类：

    .clientparams{
   margin: 40px;
   height: 30px;
   width: 250px;
   font-size: medium;
 }

 .form1{
  display: flex;
 
 }

.main_container{
  display: inline-block;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: justify;
  
  } 

有人可以帮我解决这个问题吗？

谢谢

Answer 1

你可以试试这样的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>

希望这能解决您的问题。

Answer 2

在您的任务组件中，在 .form1 div 内部，我创建了两个 div。在第一个中，我添加了您的客户信息。在第二个 div 中，我添加了 Task 组件。这 2 个 div 分别有自己的 className client_container 和 task_container。他们的 className 是用 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>
  )
}

#css

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

.client_container{
display: flex;
}

.task_container{
display: flex;
}