javascript - 如何在 react 中水平对齐 2 行？

Question

我正在制作一个 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;

任务类:
它包含标题。

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>

希望能解决你的问题。