前言：

在公司里面导师要求实现了卡片（公司使用的框架是react，卡片引用的ant-design-moble的组件）的功能，每一条数据横向展示，但是数据的key要实现右对齐，经过不断的修改，最后总结结构和样式如下：

HTML结构:

<div class="card-content"><p class="row"><span class="label">任务编号：</span><span class="value">1321231231</span></p><p class="row"><span class="label">执行者：</span><span class="value">ziop</span></p><p class="row"><span class="label">任务开始时间：</span><span class="value">2024.09.18</span></p>
</div>

样式：

 .row{display: flex;align-items: center;line-height: 21px;font-size: 14px;}.key {width: 100px; // 或者使用 min-widthtext-align: right;color: #666;}