如何解决如何在反应中水平对齐 2 行?
我正在制作一个反应应用程序,我有几列要映射到值,我想用字段值水平映射字段名称。我尝试使用下面的代码,但仍然有点未对齐。
我的代码:
任务类:
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;
}
有人可以帮我吗?
谢谢
解决方法
在您的任务组件中,在 .form1 div 内,我制作了两个 div。在第一个中,我添加了您的客户信息。在第二个 div 中,我添加了 Task 组件。这两个 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;
}
,
你可以试试这样的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>
希望能解决您的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。