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

Posted 2023-03-05

【中文标题】如何在反应中水平对齐2行？

【英文标题】：How to align 2 rows horizontally in react?

【发布时间】：2021-08-25 02:47:45

【问题描述】：

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

我的代码：

任务类：

  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;
  
   

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

谢谢

【参考方案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>

希望这能解决您的问题。

【参考方案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;

【讨论】：

如果你想水平显示 add_form 那么你必须将 display flex 属性添加到它们的父级。在你的情况下，第一个 div。

还是不行，我认为clientparams css类有问题

嘿，将 display flex 添加到您的主容器，即您的顶部容器。并从您的 add_form div 中删除显示、对齐内容和对齐项目。现在应该可以正常工作了

您可以编辑您的问题代码并发布您当前的代码。与CSS。如果你需要帮助

不，我想要一个类似表格的结构，第一行有字段名称，后续行有相应的值