如何让多列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应该就可以