如何让多列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

用flex应该就可以

Answer 2

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

Answer 3

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

Answer 4

直接给外层30%宽的那个li加个vertical-align:top就可以了.还有，你要在ul这个元素加个font-size:0;因为加了inline-block属性的元素之间会有空格字符的间距。具体的你百度下就知道了

Answer 5

用table也可以....