html - dl list - 我可以让 "dt"高于 "dl"但也可以让每个 dt/dl 组内联

Question

所以我有一个类似这样的 dl 列表:

.title {
  display: inline-block;
  padding-bottom: 20px;
}
dd {
  -moz-margin-start: 0;
  -webkit-margin-start: 0;
  -o-margin-start: 0;
  margin-start: 0;
}

  <dl class="details">
    
    <dt class="title">Name:</dt>
    <dd class="title">Box</dd>
      
    <dt class="member">Member Price</dt>
    <dd class="member">$25</dd>
    
    <dt class="retail">Retail Price</dt>
    <dd class="retail">$30</dd>
    
  </dl>

我希望 dt 显示在 dd 上方，但也希望每个 dt/dd“组”与下一个内联。如果没有绝对位置或另一个元素包装每个 dt/dd 组(这会破坏 dl 的结构)，是否完全可以做到这一点

所附图片显示了我正在努力实现的目标:

Answer 1

由于语义要求，我猜你不会更改标记 - 所以我试着摆弄一下，这里有一些技巧。

技巧 1:

使用 flexbox、边距和一些转换:

dd,
dt {
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}
dl {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: auto;
  border: 1px solid red;
}
.title {
  transform: translateX(-50%);
}
.title+.title {
  margin-top: -1.1em;
  transform: translateX(50%);
}
.member {
  align-self: flex-start;
}
.retail {
  align-self: flex-end;
  margin-top: -2.2em;
}
.retail+.retail {
  margin-top: initial;
}

<dl class="details">
  <dt class="title">Name:</dt>
  <dd class="title">Box</dd>
  <dt class="member">Member Price</dt>
  <dd class="member">$25</dd>
  <dt class="retail">Retail Price</dt>
  <dd class="retail">$30</dd>
</dl>

技巧 2:

使用 flexbox wrapping 的另一个选项:

dd,
dt {
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}
dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin: auto;
  border: 1px solid red;
}
.title {
  flex-basis: 50%;
  text-align:right;
}
.title+.title {
  text-align: left;
}
.member {
  text-align:left;
  flex-basis: 100%;
}
.retail {
  text-align:right;
  margin-top: -3.3em;
  flex-basis: 100%;
}
.retail+.retail {
  margin-top: -1.2em;
}

<dl class="details">
  <dt class="title">Name:</dt>
  <dd class="title">Box</dd>
  <dt class="member">Member Price</dt>
  <dd class="member">$25</dd>
  <dt class="retail">Retail Price</dt>
  <dd class="retail">$30</dd>
</dl>

这里有一些东西 related that I did sometime back .

祝你好运!