CODEWITHSUNDEEP
htmlcsshtml-lists
Niahc
Niahc

Reputation: 164

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

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:

dt above dl, inline with another dt/dl group

Upvotes: 2

Views: 619

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105933

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>

Upvotes: 1

andi
andi

Reputation: 6522

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>

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

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!

Upvotes: 1

Related Questions