dl list - 我可以制作＆＃34; dt＆＃34;在＆＃34; dl＆＃34;之上但也有每个dt / dl组内联

Question

所以我有一个像这样的dl列表：

＆＃13;

＆＃13;

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

＆＃13;

  <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>

＆＃13;

＆＃13;

＆＃13;

我希望dt显示在dd上方，但也适用于每个dt / dd＆＃39;组＆＃39;与下一个内联。是否可以在没有绝对位置或其他元素包装每个dt / dd组的情况下执行此操作（这会破坏dl的结构）

附图显示了我想要实现的目标：

Answer 1

由于语义要求，我猜你不会改变标记 - 所以我试图摆弄，这里有一些 hacks 。

Hack 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>

Hack 2 ：

使用flexbox 换行的另一个选项：

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。

祝你好运！

Answer 2

这是一种设置方式。它使用margin-top等于2行高（我假设你的内容很短）拉出第一个.retail元素。然后它向左移动.member，向右移动.retail。 （如果在页面中效果更好，则可以使用百分比宽度而不是固定宽度。）

＆＃13;

＆＃13;

.details {text-align:center; line-height:1.5em;}
dt, dd {display:block; margin:0; padding:0;}
.title {display:inline-block;}
.member + .retail {margin-top:-3em;}
.member {margin-left:-200px;}
.retail {margin-left:200px;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

flex，order，wrap和width的另一种margin方法：

（添加了一些颜色，以便您了解哪些选择器定位）

＆＃13;

＆＃13;

dl, dt, dd {
  margin:0;
  padding:0.25em 1em;
  box-sizing:border-box;
}
dl {
  display:flex;
  flex-wrap:wrap;
  width:400px;
  margin:auto;
  background:gray;
}
dt, dd {
  width:50%;
}
.title {
  padding:0.5em 0.1em 1.25em;
}
dl.details > :nth-child(odd) {  
  order:0;
  /* see me */color:yellow;
}
dl.details > .member ~ :nth-child(even) {
  order:1;
  /* see me */ background:tomato;
}
dl.details > :nth-child(3n+1),
dl.details > :nth-child(3){
  text-align:right;
  /* see me */ box-shadow:inset 0 0 0 2px turquoise;
}
.retail +.retail,
.member + .member{
  width:35%;/* might need tuning up to 47% */
  margin:auto;
  /*see me */ color:white;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;