dl list - can I make the "dt" above the "dl" but also have each dt/dl group inline

Question

So I have a dl list something like this:

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

I would like the dt to display above the dd, but also for each dt/dd 'group' to be inline with the next. Is it at all possible to do this without position absolute or another element wraping each dt/dd group (which would break the structure of the dl)

The image attached shows what I am trying to achieve:

it doesn't seem like `
` is the right element to use for this, just semantically speaking. are you open to other HTML? — andi, Dec 08 '16 at 17:22
Its HTML written by my boss who is a big fan of DL. I'm curious if it is even technically possible to use DL this way, or if not I'm certain it would be easy to use something else. — Niahc, Dec 08 '16 at 17:29

score 1 · Answer 1 · edited May 23 '17 at 12:30

Because of semantic requirements, I guess you won't change the markup - so I tried fiddling around and here are some hacks.

Hack 1:

Using flexbox,margins and some transforming :

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:

Another option using 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>

And here is something related that I did sometime back.

Good luck!

thanks, its a very clever use of flexbox and worked great with some adjustments! — Niahc, Dec 13 '16 at 18:13

score 1 · Answer 2 · answered Dec 08 '16 at 18:29

Here's a way to set it up. It pulls up the first .retail element using the margin-top being equal to 2 line-heights (I assume your content is short). And then it moves .member to the left and .retail to the right. (you can use percent widths instead of fixed, if that works better in your page.)

.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;}

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

I ended up using this mostly because its just the simplest way and gives easy control of how far towards the edge each group is. Thanks! — Niahc, Dec 13 '16 at 18:16

score 1 · Answer 3 · answered Dec 08 '16 at 19:58

Another flex approach with order, wrap, width and margin:

(Added some colors so you see what selectors are targeting)

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

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

dl list - can I make the "dt" above the "dl" but also have each dt/dl group inline

3 Answers3