How to Style Dt and Dd So They Are on the Same Line

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

dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0;
  padding: 0;
  margin: 0
}

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

Can I render a DT on the same line as its DD?

Ok this works just the way you wanted. I fixed wazaminator code so that it works across browsers. The problem was that a few browsers add a margin-start for dds. I didn't test in IE:

dt {
  float: left;
  clear: left;
  margin-right: 5px;
  font-weight: bold;
}

dd {
  margin-left: 0px;
}

http://jsfiddle.net/sPQmw/18/

How do I style dd and dt elements to be on the same line with dt right aligned and dd left aligned?

You can use this CSS to get desired results

dt,
dd {
  display: inline-block;
  width: calc(50% - 0.5rem);
  margin: 0;
}

dt {
  text-align: right;
}

dt::after {
  content: ":";
}

Example Code

How to get multiple dl/dt/dd tags on the same line

The dt and dd tags have display: block set from the browser. Just reset that to display: inline or inline-block to make them on the same line.

dt, dd {  display: inline-block;  margin: 0;}dt {  font-weight: bold;}dt:after {  content: ":";}

<dl>  <dt>Name</dt>  <dd>Robert</dd>  <dt>Age</dt>  <dd>10</dd>  <dt>Gender</dt>  <dd>Male</dd></dl>

html definition list on same line with variable dt size

Here are two partial solutions, one using flexbox, another using floats. No extra HTML, just yours. Both solutions are not for old browsers. Possible to get rid of calc() by putting the horizontal spacing inside elements, not outside (margin), as it is now.

Well, and the main thing: sorry, but the widths are static — 20% for dt, 80%-1em for dd. To make it work like you need, taking the max width of all dt elements, you'll have to use JavaScript and count widths of dt and dd. Or switch to ye olde table layout, which would literally solve the whole thing. As far as I know.

dl.using-flex{ display: flex; flex-direction:row; flex-wrap: wrap; }.using-flex dt { flex-basis:20%; }.using-flex dd { flex-basis: calc(80% - 1em); }

dl.using-floats{ overflow:hidden; /* for clearfix */}.using-floats dt{ float:left; width:20%; clear:left;}.using-floats dd{ float:left; width:calc(80% - 1em); }
dt, dd{ margin:0 0 1em; }dd{ margin-left:1em; }

<h2>Using flexbox</h2><dl class="using-flex">    <dt>Date:</dt>    <dd>wed 6 january 2017</dd>    <dt>Location:</dt>    <dd>        Champ de Mars<br/>5 Avenue Anatole France<br/>75007 Paris    </dd>    <dt>Info:</dt>    <dd>        The Eiffel Tower (/ˈaɪfəl ˈtaʊər/ eye-fəl towr; French: Tour Eiffel, pronounced: [tuʁ‿ɛfɛl] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower.    </dd></dl>
<h2>Using floats</h2><dl class="using-floats">    <dt>Date:</dt>    <dd>wed 6 january 2017</dd>    <dt>Location:</dt>    <dd>        Champ de Mars<br/>5 Avenue Anatole France<br/>75007 Paris    </dd>    <dt>Info:</dt>    <dd>        The Eiffel Tower (/ˈaɪfəl ˈtaʊər/ eye-fəl towr; French: Tour Eiffel, pronounced: [tuʁ‿ɛfɛl] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower.    </dd></dl>

Showing definition list with DT and DD on same row

Your problem is that an empty dd is not generated and leaves an empty space (height:0px).

If you can, yes, simply put a nbsp; inside any empty element. It's the simplest solution that will work cross-browser.

A simple, pure css fix would be like this :

dd:after {content:"."}

But it adds a dot after each definition...

You can also simply set a min-height on your dd :

dt {clear: left;}
dt, dd {min-height:1.5em;}

(dt and dd min-height needs to be the same!)

demo

...You'll probably run into issue if your dt height is not regular (if it's sometime on 2 lines for example).

Can I group group dl/dd/dt displays two different ways on same page?

Maybe I'm missing something, but it seems like you just need to set the dt/dd's as child elements of dl with the '>' character. Here's an example showing the two different version views:

 main {
   display: grid;
   gap: 0.25rem;
 }
/* 12.5rem (9 boxes), 16 (7), 18 (6), 20 (5), 25 (4), 33rem (3), 40rem (2) all work */
/* */
 .gridCols9 {  grid-template-columns: repeat(auto-fit,minmax(12.5rem, 1fr)); }
 .gridCols7 {  grid-template-columns: repeat(auto-fit,minmax(16rem, 1fr)); }
 .gridCols6 {  grid-template-columns: repeat(auto-fit,minmax(18rem, 1fr)); }
 .gridCols5 {  grid-template-columns: repeat(auto-fit,minmax(20rem, 1fr)); }
 .gridCols4 {  grid-template-columns: repeat(auto-fit,minmax(25rem, 1fr)); }
 .gridCols3 {  grid-template-columns: repeat(auto-fit,minmax(33rem, 1fr)); }
 .gridCols2 {  grid-template-columns: repeat(auto-fit,minmax(40rem, 1fr)); }
/* */

 main > fieldset { border: 1px solid black; }
 .fontInfo {
   white-space: pre-wrap; 
   font-family: monospace;
 }
 h3 {
   background-color: lightgreen; text-align: center;
   font-size: 1.2rem; cursor: pointer;
   margin: 0; padding: 0; 
 }
 article { margin-top: 0; display: block; }

/* Following from: https://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line */
/* Comment out following for entirely different display */
dl.singleLines {
   display: grid;
   grid-template-columns: max-content auto;
  }
  dl.singleLines>dt { grid-column-start: 1; }
  dl.singleLines>dd { grid-column-start: 2; }

<main class="gridCols4">
  <fieldset>
    <legend> Normal </legend>
    <article>
      <h3>DL/DT/DD Display</h3>
    </article>
    <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>
  </fieldset>

  <fieldset>
    <legend> Modified </legend>
    <article>
      <h3>DL/DT/DD Display</h3>
    </article>
    <dl class="singleLines">
      <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>
  </fieldset>

</main>

How to Style Dt and Dd So They Are on the Same Line