前言:
在公司里面导师要求实现了卡片(公司使用的框架是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;}