[html] How to style dt and dd so they are on the same line?

Using CSS, how can I style the following:

<dl>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

so the content of the dt show in one column and the content of the dd in another column, with each dt and the corresponding dd on the same line? I.e. producing something that looks like:

This works on IE7+, is standards compliant, and allows differing heights.

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>        

See the JSFiddle.

Most of what people here suggested works, however you should only place generic code in to the style sheet, and place the specific code in to the html code as shown below. Otherwise you will end up with a bloated style sheet.

Here is how I do it:

Your style sheet code:

<style>
    dt {
        float:left;
    }
    dd {
        border-left:2px dotted #aaa;
        padding-left: 1em;
        margin: .5em;
    }   
</style>

Your html code:

<dl>
    <dt>1st Entity</dt>
    <dd style="margin-left: 5em;">Consumer</dd>
    <dt>2nd Entity</dt>
    <dd style="margin-left: 5em;">Merchant</dd>
    <dt>3rd Entity</dt>
    <dd style="margin-left: 5em;">Provider, or cToken direct to Merchant</dd>
    <dt>4th Entity</dt>
    <dd style="margin-left: 5em;">cToken to Provider</dd>
</dl>

Looks like this

I recently needed to mix inline and non-inline dt/dd pairs, by specifying the class dl-inline on <dt> elements that should be followed by inline <dd> elements.

dt.dl-inline {_x000D_
  display: inline;_x000D_
}_x000D_
dt.dl-inline:before {_x000D_
  content:"";_x000D_
  display:block;_x000D_
}_x000D_
dt.dl-inline + dd {_x000D_
  display: inline;_x000D_
  margin-left: 0.5em;_x000D_
  clear:right;_x000D_
}

<dl>_x000D_
    <dt>The first term.</dt>_x000D_
    <dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>_x000D_
    <dt class="dl-inline">The second term.</dt>_x000D_
    <dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>_x000D_
    <dt class="dl-inline">The third term.</dt>_x000D_
    <dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>_x000D_
    <dt>The fourth term</dt>_x000D_
    <dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>_x000D_
</dl_x000D_
_x000D_
>

Assuming you know the width of the margin:

dt { float: left; width: 100px; }
dd { margin-left: 100px; }

Here's another option that works by displaying the dt and dd inline and then adding a line break after the dd.

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

This is similar to Navaneeth's solution above, but using this approach, the content won't line up as in a table, but the dd will follow the dt immediately on every line regardless of length.

See jsFiddle demo

I needed a list exactly as described for a project that showed employees at a company, with their photo on the left, and information on the right. I managed to accomplish the clearing by using psuedo-elements after every DD:

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

In addition, I wanted the text to only display to the right of the image, without wrapping under the floated image (pseudo-column effect). This can be accomplished by adding a DIV element with the CSS overflow: hidden; around the content of the DD tag. You can omit this extra DIV, but the content of the DD tag will wrap under the floated DT.

After playing with it a while, I was able to support multiple DT elements per DD, but not multiple DD elements per DT. I tried adding another optional class to clear only after the last DD, but subsequent DD elements wrapped under the DT elements (not my desired effect… I wanted the DT and DD elements to form columns, and the extra DD elements were too wide).

By all rights, this should only work in IE8+, but due to a quirk in IE7 it works there as well.

CSS Grid layout

Like tables, grid layout enables an author to align elements into columns and rows.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

To change the column sizes, take a look at the grid-template-columns property.

dl {_x000D_
  display: grid;_x000D_
  grid-template-columns: max-content auto;_x000D_
}_x000D_
_x000D_
dt {_x000D_
  grid-column-start: 1;_x000D_
}_x000D_
_x000D_
dd {_x000D_
  grid-column-start: 2;_x000D_
}

<dl>_x000D_
  <dt>Mercury</dt>_x000D_
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>_x000D_
  <dt>Venus</dt>_x000D_
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>_x000D_
  <dt>Earth</dt>_x000D_
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>_x000D_
</dl>

Depending on how you style the dt and dd elements, you might encounter a problem: making them have the same height. For instance, if you want to but some visible border at the bottom of those elements, you most probably want to display the border at the same height, like in a table.

One solution for this is cheating and make each row a "dl" element. (this is equivalent to using tr in a table) We loose the original interest of definition lists, but on the counterpart this is an easy manner to get pseudo-tables that are quickly and pretty styled.

THE CSS:

dl {
 margin:0;
 padding:0;
 clear:both;
 overflow:hidden;
}
dt {
 margin:0;
 padding:0;
 float:left;
 width:28%;
 list-style-type:bullet;
}
dd {
 margin:0;
 padding:0;
 float:right;
 width:72%;
}

.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}

THE HTML:

<div class="huitCinqPts bord_inf_gc">
  <dl><dt>Term1</dt><dd>Definition1</dd></dl>
  <dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>

Here is one possible flex-based solution (SCSS):

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  dt {
    width: 150px;
  }
  dd {
    margin: 0;
    flex: 1 0 calc(100% - 150px);
  }
}

that works for the following HTML (pug)

dl
  dt item 1
  dd desc 1
  dt item 2
  dd desc 2

In my case I just wanted a line break after each dd element.

Eg, I wanted to style this:

<dl class="p">
  <dt>Created</dt> <dd><time>2021-02-03T14:23:43.073Z</time></dd>
  <dt>Updated</dt> <dd><time>2021-02-03T14:44:15.929Z</time></dd>
</p>

like the default style of this:

<p>
  <span>Created</span> <time>2021-02-03T14:23:43.073Z</time><br>
  <span>Updated</span> <time>2021-02-03T14:44:15.929Z</time>
</p>

which just looks like this:

Created 2021-02-03T14:23:43.073Z
Updated 2021-02-03T14:44:15.929Z

To do that I used this CSS:

dl.p > dt {
  display: inline;
}

dl.p > dd {
  display: inline;
  margin: 0;
}

dl.p > dd::after {
  content: "\A";
  white-space: pre;
}

Or you could use this CSS:

dl.p > dt {
  float: left;
  margin-inline-end: 0.26em;
}

dl.p > dd {
  margin: 0;
}

I also added a colon after each dt element with this CSS:

dl.p > dt::after {
  content: ":";
}

If you use Bootstrap 3 (or earlier)...

<dl class="dl-horizontal">
    <dt>Label:</dt>
    <dd>
      Description of planet
    </dd>
    <dt>Label2:</dt>
    <dd>
      Description of planet
    </dd>
</dl>

Because I have yet to see an example that works for my use case, here is the most full-proof solution that I was able to realize.

dd {_x000D_
    margin: 0;_x000D_
}_x000D_
dd::after {_x000D_
    content: '\A';_x000D_
    white-space: pre-line;_x000D_
}_x000D_
dd:last-of-type::after {_x000D_
    content: '';_x000D_
}_x000D_
dd, dt {_x000D_
    display: inline;_x000D_
}_x000D_
dd, dt, .address {_x000D_
    vertical-align: middle;_x000D_
}_x000D_
dt {_x000D_
    font-weight: bolder;_x000D_
}_x000D_
dt::after {_x000D_
    content: ': ';_x000D_
}_x000D_
.address {_x000D_
    display: inline-block;_x000D_
    white-space: pre;_x000D_
}

Surrounding_x000D_
_x000D_
<dl>_x000D_
  <dt>Phone Number</dt>_x000D_
  <dd>+1 (800) 555-1234</dd>_x000D_
  <dt>Email Address</dt>_x000D_
  <dd><a href="#">[email protected]</a></dd>_x000D_
  <dt>Postal Address</dt>_x000D_
  <dd><div class="address">123 FAKE ST<br />EXAMPLE EX  00000</div></dd>_x000D_
</dl>_x000D_
_x000D_
Text

Strangely enough, it doesn't work with display: inline-block. I suppose that if you need to set the size of any of the dt elements or dd elements, you could set the dl's display as display: flexbox; display: -webkit-flex; display: flex; and the flex shorthand of the dd elements and the dt elements as something like flex: 1 1 50% and display as display: inline-block. But I haven't tested that, so approach with caution.

I have got a solution without using floats!
check this on codepen

Viz.

dl.inline dd {
  display: inline;
  margin: 0;
}
dl.inline dd:after{
  display: block;
  content: '';
}
dl.inline dt{
  display: inline-block;
  min-width: 100px;
}

Update - 3^rd Jan 2017: I have added flex-box based solution for the problem. Check that in the linked codepen & refine it as per needs. Thanks!

dl.inline-flex {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 300px;      /* set the container width*/
  overflow: visible;
}
dl.inline-flex dt {
  flex: 0 0 50%;
  text-overflow: ellipsis;
  overflow: hidden;
}
dl.inline-flex dd {
  flex:0 0 50%;
  margin-left: auto;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

You can use CSS Grid:

dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

<dl>
<dt>Title 1</dt>
<dd>Description 1</dd>
<dt>Title 2</dt>
<dd>Description 2</dd>
<dt>Title 3</dt>
<dd>Description 3</dd>
<dt>Title 4</dt>
<dd>Description 4</dd>
<dt>Title 5</dt>
<dd>Description 5</dd>
</dl>

I usually start with the following when styling definition lists as tables:

dt,
dd{
    /* Override browser defaults */
    display: inline;
    margin: 0;
}

dt  {
    clear:left;
    float:left;
    line-height:1; /* Adjust this value as you see fit */
    width:33%; /* 1/3 the width of the parent. Adjust this value as you see fit */
}

dd {
    clear:right;
    float: right;
    line-height:1; /* Adjust this value as you see fit */
    width:67%; /* 2/3 the width of the parent. Adjust this value as you see fit */
}

this works to display them as table, with border, it should be responsive with 3em the width of the first column. The word-wrap just breaks any words wider than the column

 dl { display:block;
      border:2px solid black;
      margin: 1em;}  
 dt { display:inline-block;
      width:3em;
      word-wrap:break-word;} 
 dd { margin-left:0;
      display:inline;
      vertical-align:top;
      line-height:1.3;} 
 dd:after { content:'';display:block; } 

Comparison of <table> with <dl>:

<!DOCTYPE html>_x000D_
<html>_x000D_
<style>_x000D_
_x000D_
dl { display:block;border:2px outset black;margin:1em; line-height:18px;}  _x000D_
dt { display:inline-block;width:3em; word-wrap:break-word;} _x000D_
_x000D_
dd { margin-left:0; display:inline; vertical-align:top; line-height:1.3;} _x000D_
dd:after { content:'';display:block; } _x000D_
_x000D_
_x000D_
.glosstable { border:2px outset #aaaaaa;margin:1em; text-align:left}  _x000D_
.glosstable, table, tbody,  tr,  td, dl, dt {font-size:100%; line-height:18px;}_x000D_
_x000D_
.glossaz { font-size:140%;padding-left:2em;font-weight:bold;color: #00838c; } _x000D_
td.first {width: 2.5em;} _x000D_
</style>_x000D_
<body>_x000D_
Table<br>_x000D_
<table class="glosstable">_x000D_
  <tr><td class="first">Milk</td>_x000D_
  <td class="glossdata">Black hot drink</td>_x000D_
</tr>_x000D_
  <tr><td class="first">Coffee2</td>_x000D_
  <td class="glossdata">Black hot drink</td>_x000D_
</tr>_x000D_
  <tr><td>Warm milk</td>_x000D_
  <td class="glossdata">White hot drink</td>_x000D_
</tr>_x000D_
</table>_x000D_
DL list <br>_x000D_
<dl class="glosstablep">_x000D_
  <dt>Milk</dt>_x000D_
  <dd class="glossdata">White cold drink</dd>_x000D_
  <dt>Coffee2</dt>_x000D_
  <dd class="glossdata">Black cold drink</dd>_x000D_
  <dt>Warm Milk</dt>_x000D_
  <dd class="glossdata">White hot drink</dd>_x000D_
</dl>_x000D_
_x000D_
</body>_x000D_
</html>

I've found a solution that seems perfect to me, but it needs extra <div> tags. It turns out that it is not necessary to use <table> tag to align as in a table, it suffices to use display:table-row; and display:table-cell; styles:

<style type="text/css">
dl > div {
  display: table-row;
}
dl > div > dt {
  display: table-cell;
  background: #ff0;
}
dl > div > dd {
  display: table-cell;
  padding-left: 1em;
  background: #0ff;
}
</style>

<dl>
  <div>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  </div>
  <div>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  </div>
  <div>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
  </div>
</dl>

I need to do this and have the <dt> content vertically centered, relative to the <dd> content. I used display: inline-block, together with vertical-align: middle

See full example on Codepen here

.dl-horizontal {
  font-size: 0;
  text-align: center;

  dt, dd {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 10px);
  }

  dt {
    text-align: right;
    padding-right: 10px;
  }

  dd {
    font-size: 18px;
    text-align: left;
    padding-left: 10px;
  } 
}