Question 274425 in Html Question posted in
Some basic documentation can be found here.

Html – Non-deprecated alternatives for <dl compact>

From Internet Explorer I fondly remember the possibility to create compact definition lists with code like

<dl compact>
    <dt>f</dt>
        <dd>Firefox</dd>
    <dt>i</dt>
        <dd>Internet Explorer</dd>
</dl>

with the results looking like this:

But alas, no current browser seems to support this feature; MDN does not even list the element as deprecated.

Firefox instead shows the definition details below the term:

non-compact

I tried using CSS like this:

dl>dd {
    margin-top: -1em;
}

and it almost works, but the term and details do not line up nicely:

almost compact

Is there a CSS (or other) solution to come closer to the Internet Explorer <dl compact> that does not rely on fiddling with funny margin-top values?

Tags:

3

Answers


  1. 0

    I think you would want to change them from block to inline.

    dl[compact] dt,
dl[compact] dd {
  display: inline;
}


/* this makes the break between items */

dl[compact] dt:before {
  content: ' ';
  display: block;
}
    <dl compact>
  <dt>f</dt>
  <dd>Firefox</dd>
  <dt>i</dt>
  <dd>Internet Explorer</dd>
</dl>
    Login or Signup to reply.
  2. 0

    Another approach would be using grid.

    dd {
  margin: 0;
}

dl {
  column-gap: 1rem;
  display: inline-grid;
  grid-template-columns: auto auto;
  width: auto;
}
    <dl>
  <dt>f</dt>
  <dd>Firefox</dd>
  <dt>i</dt>
  <dd>Internet Explorer</dd>
</dl>
    Login or Signup to reply.
  3. 0

    Another approach to styling a compact description list that will keep things vertically aligned (even with different width terms) would be to use CSS Grid with rules for placing the terms and descriptions in their respective columns. It even works for lists that contain terms with multiple descriptions.

    dl.compact {
  display: grid;
  grid-template: auto / auto auto;
  width: fit-content;
  column-gap: 1em;
}
dl.compact dt {
  grid-column-start: 1;
}
dl.compact dd {
  grid-column-start: 2;
  margin: 0;
}
    <dl class="compact">
  <dt>Name</dt>
  <dd>Jean-Luc Picard</dd>
  <dt>Rank</dt>
  <dd>Captain</dd>
  <dt>Postings</dt>
  <dd>USS Reliant</dd>
  <dd>USS Stargazer</dd>
  <dd>USS Enterprise-D</dd>
  <dd>USS Enterprise-E</dd>
  <dt>Sons</dt>
  <dd>Thomas Picard</dd>
  <dd>Matthew Picard</dd>
</dl>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search