没有单词时如何固定dt和dd高度

Question

我在这里固定表（dd和dt），当什么都没有时，dt中每一行之间的线似乎断开了？我应该在CSS中更改/添加什么？

这是整个文件

<template>
    <div class="nc-address-card" data-cy="address-card">
        <dl>
            <dt>{{ $ncs.postalCodde }}</dt><dd>{{ sender['postal_code'] }}</dd>
            <dt>{{ $ncs.prefecture }}</dt><dd>{{ sender['prefecture'] }}</dd>
            <dt>{{ $ncs.cityTown }}</dt><dd>{{ sender['city_town'] }}</dd>
            <dt>{{ $ncs.houseName }}</dt><dd>{{ sender['house_num'] }}</dd>
            <dt>{{ $ncs.buildingName }}</dt><dd>{{ sender['building_name'] }}</dd>
            <dt>{{ $ncs.companyName }}</dt><dd>{{ sender['company_name'] }}</dd>
            <dt>{{ $ncs.departmentName }}</dt><dd>{{ sender['department_name'] }}</dd>
            <dt>{{ $ncs.staffName }}</dt><dd>{{ sender['staff_name'] }}</dd>
            <dt>{{ $ncs.telephoneNum }}</dt><dd>{{ sender['telephone_num'] }}</dd>
        </dl>
    </div>
</template>

<style lang="scss" scoped>
    dl {
      width: 41rem;
    }
    dt, dd {
      border-bottom: solid 1px $gray;
      display: inline-block;
      line-height: 150%;
      padding: 0.5rem 1.3rem;
      margin: 0;
      white-space: nowrap;
      &:nth-child(1), &:nth-child(2) {
        border-top: solid 1px $gray;
      }
    }

    dt {
      width: 10rem;
      background-color: $table-header;
    }
    dd {
      width: 30rem;
    }
</style>

Answer 1

将vertical align属性设置为top，以将内联块对齐到top。这样可以解决您的问题。

 dt, dd {
       border-bottom: solid 1px $gray;
       display: inline-block;
       vertical-align: top;
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align