如何让多列li 顶部对齐

Question

<ul class="pd10" style="border-right: 1px solid #ddd;"><li>  <span>车牌号：</span>{{li.carNo}}</li><li>  <span>车型：</span>{{li.reason}}</li><li v-if="li.fromOrganId == li.serviceOrganId || carReason == 'YES'">  <span>用车事由：</span>{{li.num}}</li><li>  <span>开始时间：</span>{{li.startTime |slice19}}</li><li>  <span>结束时间：</span>{{li.endTime |slice19}}</li><li>  <span>用车时长：</span>{{li.times}}</li><li>  <span>上车地点：</span>{{li.startAddress}}</li><li>  <span>下车地点：</span>{{li.endAddress}}</li><li style="font-weight:bold;">  <span>公里数：</span>{{li.totalMile}}公里</li></ul>如图，用的是li循环，li都设置成了inline-block！固定30%宽度，在某一列内容过多折行的时候，其他列的li怎么能顶部对齐，让他们保持一致呢？求大神帮帮忙

Answer 1

li {

display: inline-table;

}

Answer 2

inline-block 是底部对齐， float: left 是顶部对齐。
或者用 flex 布局 align-items: flex-start

Answer 3

你用inline-block的话，默认是baseline,所以你要设置li的vertical-align:top

Answer 4

用flex应该就可以