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

Question

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:

Just as a useful note: if you wanna control the spacing between lines of dts and dds, check this: http://stackoverflow.com/q/896815/114029 These powerful tags make styling forms really easy and beautiful. — Leniel Maccaferri, Nov 12 '11 at 21:12
Also see http://stackoverflow.com/questions/896815/css-dl-with-spacing-margin-between-the-dt-dd-pairs particularly the accepted answer http://stackoverflow.com/a/896840/1037948 — drzaus, Oct 27 '16 at 16:50
Please consider changing the accepted answer to this: https://stackoverflow.com/a/44599527/3853934 — Michał Perłakowski, Jul 04 '18 at 08:07

score 154 · Accepted Answer · edited Jun 27 '21 at 23:51

154

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>

edited Jun 27 '21 at 23:51

dusan

9,104
3
35
55

answered Nov 11 '09 at 04:44

eozzy

66,048
104
272
428

2

Thanks! This CSS tip helped me to format my Zend Form without having to code form decorator classes. – devNoise Jun 15 '11 at 04:22
You don't seem to be able to add a bottom margin or padding tow space out the "rows" using this method. – Graeck Sep 13 '13 at 22:37
8

I recommend adding a `clear: left` to the dt style to ensure they stay inline even if they need to wrap. – Simon Feb 04 '14 at 19:37
1

The `* { ... }` statement makes everything lose the margin and padding, and removing it distorts the DL. Using a class won't do the trick either. It seems that if I want anything but the DL I'll have to go without margins and paddings everywhere... Or? – Erk May 20 '14 at 19:09
1

This behaves awkwardly when you select (double click) the first word in the
. It also selects the text inside the
unless there's whitespace (or an if you're using htmlmin) between the
and
.
– KFunk Mar 01 '17 at 00:29
Thanks. Works like a charm. @Simon, the "clear: left" fixed a nagging problem I had with cascading items. All great now. – Simon Parker Feb 07 '18 at 01:26

yckart · Answer 2 · 2017-06-17T00:47:28.850

150

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 {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

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

edited Jun 17 '17 at 00:47

answered Jun 17 '17 at 00:10

yckart

32,460
9
122
129

This is _exactly_ what I want. https://caniuse.com/#feat=css-grid - not quite as universal as I'd like, but tolerably well supported. – Iiridayn Mar 02 '18 at 02:10
Exactly what I needed. The other solutions have somre requirements liek a fix width for container or first column but this is perfectly dynamic :) – Chaoste Aug 20 '20 at 08:23
1

This solution works for me. To give a space between columns I just used `column-gap` instead of changing values of `grid-template-columns`. There's a `row-gap` property as well. – lucrp May 12 '22 at 15:01
This is the future and the future is now. Would be grand if this got upvoted to the top. – Sixtyfive Jul 19 '22 at 23:13

score 140 · Answer 3 · edited Jul 17 '21 at 19:51

140

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.

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

edited Jul 17 '21 at 19:51

Zoe

27,060
21
118
148

answered Jan 21 '14 at 14:45

Navaneeth

2,555
1
18
38

2

Perfect! That evil float just solved one problem while giving me two new ones (like no vertical align). Nice that it's gone now. – flu Mar 21 '14 at 18:41
10

This works well with short text in the DD part; if the text is too long, it will wrap around and show under the DT part. – Riccardo Murri Jun 30 '14 at 10:23
3

This works even if some items of the list are empty. Great! – Tomas Kubes Jan 08 '16 at 15:35
@tjm1706: I think, the flex based solution could handle longer text case. thanks :) – Navaneeth Jan 03 '17 at 08:11
@navaneeth Great sol'n. To get dots between the word and definition I added: dl.inline-flex dt:after { content: "................" } I actually use 150 dots here to ensure there are enough. You also need to add white-space: nowrap to the dt – MERM May 13 '17 at 19:34
What if we don't want the dt to get half of the width and its width be driven by the length of the text in it. This can be done easily using tables, but I prefer to use dl with flexbox rather than tables for layout. – smohadjer Jul 24 '17 at 22:04
1

NP: `flex-flow: row;` should be `flex-direction: row;` if you want direction and wrap separated; otherwise, use `flex-flow: row wrap;` and remove `flex-wrap: wrap;`. @smohadjer, change `dt` to use `flex: 0 0 auto;`, and `dd` to use `flex: 1 1 0;`. – Jordan Pickwell Jan 18 '18 at 20:52
@smohadjer, I spoke too soon. I assumed column-based shrink and auto would work here, but they do not because the `dt` and `dd` are like columns in a single row (`dl`). – Jordan Pickwell Jan 18 '18 at 21:01

score 61 · Answer 4 · edited Jan 30 '19 at 17:42

61

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>

edited Jan 30 '19 at 17:42

Edric

24,639
13
81
91

answered Nov 14 '12 at 00:56

silvster27

1,916
6
30
44

16

If you look at Bootstrap's CSS you can get an idea of how to style it even without using Bootstrap, too, though I do love that framework. Here's a snippet, ignoring the media queries for responsive design for simplicity of an example: dl{margin-top:0;margin-bottom:20px} dt,dd{line-height:1.428571429} dt{font-weight:700} dd{margin-left:0} .dl-horizontal dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dl-horizontal dd{margin-left:180px} – Tim Franklin Feb 13 '14 at 16:25
11

the `dl-horizontal` was actually dropped from Bootstrap 4. In BS4, you need to use grid classes instead. – Scribblemacher Aug 30 '17 at 20:16

ancestral · Answer 5 · 2012-06-16T18:27:04.197

22

Assuming you know the width of the margin:

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

edited Jun 16 '12 at 18:27

answered Jun 15 '12 at 09:09

ancestral

1,851
1
12
7

2

I wouldn't call it clean, because you've hardcoded the margins in. – Liam Dawson Jun 15 '12 at 12:39
7

Clean: having a simple, well-defined, and pleasing shape. The answer is short. It solves the problem in three statements. Not having known the margin was not a requirement as part of the question. – ancestral Jun 15 '12 at 14:26
6

Clean is generally used for markup in these styles of questions. Anyway, welcome to StackOverflow, and I recommend that you put those kinds of assumptions in the body of your question, just for clarity. – Liam Dawson Jun 15 '12 at 23:18
Note that `
Mercury
` distorts the required layout (?). – clp Oct 25 '22 at 09:40

score 14 · Answer 6 · answered Aug 17 '15 at 08:17

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

Surrounding

<dl>
  <dt>Phone Number</dt>
  <dd>+1 (800) 555-1234</dd>
  <dt>Email Address</dt>
  <dd><a href="#">example@example.com</a></dd>
  <dt>Postal Address</dt>
  <dd><div class="address">123 FAKE ST<br />EXAMPLE EX  00000</div></dd>
</dl>

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.

seems like the only way how to achieve desired layout with flexible widths of both dt and dd — sKopheK, Aug 05 '23 at 21:52

score 7 · Answer 7 · answered Nov 25 '20 at 14:29

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>

thirdender · Answer 8 · 2012-12-23T00:16:25.913

jsFiddle Screenshot

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.

Easily one of the best answers here. – Michael Ahlers Feb 05 '16 at 23:11 — Michael Ahlers, Feb 05 '16 at 23:11

score 5 · Answer 9 · answered Jun 01 '14 at 18:57

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.

score 5 · Answer 10 · answered Jul 16 '15 at 14:05

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

score 4 · Answer 11 · edited Jul 17 '21 at 19:51

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

dl { display:block;border:2px outset black;margin:1em; line-height:18px;}  
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; } 


.glosstable { border:2px outset #aaaaaa;margin:1em; text-align:left}  
.glosstable, table, tbody,  tr,  td, dl, dt {font-size:100%; line-height:18px;}

.glossaz { font-size:140%;padding-left:2em;font-weight:bold;color: #00838c; } 
td.first {width: 2.5em;} 
</style>
<body>
Table<br>
<table class="glosstable">
  <tr><td class="first">Milk</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td class="first">Coffee2</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td>Warm milk</td>
  <td class="glossdata">White hot drink</td>
</tr>
</table>
DL list <br>
<dl class="glosstablep">
  <dt>Milk</dt>
  <dd class="glossdata">White cold drink</dd>
  <dt>Coffee2</dt>
  <dd class="glossdata">Black cold drink</dd>
  <dt>Warm Milk</dt>
  <dd class="glossdata">White hot drink</dd>
</dl>

</body>
</html>

Simon · Answer 12 · 2020-08-12T00:00:14.600

3

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

edited Aug 12 '20 at 00:00

answered Aug 11 '20 at 23:54

Simon

158
1
7

Mike Godin · Answer 13 · 2015-11-11T15:17:14.493

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 {
  display: inline;
}
dt.dl-inline:before {
  content:"";
  display:block;
}
dt.dl-inline + dd {
  display: inline;
  margin-left: 0.5em;
  clear:right;
}

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

>

score 2 · Answer 14 · edited Dec 14 '12 at 12:53

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>

You don't write `quatreVingtCinqPts`? :) – nicodemus13 May 07 '14 at 16:25 — nicodemus13, May 07 '14 at 16:25

score 2 · Answer 15 · answered Jul 02 '11 at 23:54

2

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>

answered Jul 02 '11 at 23:54

Alexey

77
1
1

Why's it not XHTML compliant? – Derick Schoonbee Feb 27 '12 at 15:24
9

@DerickSchoonbee - Because `dl`s are only allowed to have `dt`s and `dd`s as children. `dt`s can only have inline elements as children. `dd`s, for some reason, can have block-level elements as children. – Anthony Mar 06 '12 at 08:43
7

-1 Not valid HTML 4, XHTML 1, or HTML 5. Basically, you just want the `DI` element, [like myself](http://html5doctor.com/the-dl-element/#comment-37268). But with any such element, you don't need esoteric stuff like CSS tables at all... Anyhow, that element doesn't exist, and so you should not use it. – Andreas Rejbrand Aug 24 '13 at 15:39
@AndreasRejbrand The DI element is not valid HTML5 either – AlexMorley-Finch Jan 21 '14 at 15:06
@AlexMorley-Finch: I know. That's why I said I *wanted* such an element (DI is from XHTML 2.0). By the way, Ian Hickson, the WHATWG HTML 5 editor, made me realise that the `run-in` CSS `display` value is exactly what I want (in my case, I want simple name-value metadata lists). – Andreas Rejbrand Jan 21 '14 at 19:18

score 1 · Answer 16 · answered Jul 01 '14 at 23:39

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.

ma11hew28 · Answer 17 · 2021-02-03T17:53:39.373

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

Stan Switzer · Answer 18 · 2021-07-17T19:47:06.487

I had a very similar issue. I wanted the definition on the same line but only if the terms didn't flow past its start position. In that case I wanted it to be on a new line. After much trial and error I found a solution that's surprisingly simple using floats.

<html>
    <style>
        dl.definitions, dl.definitions dt, dl.definitions dd {
            display: block;
        }
        dl.definitions dt {
            float: left;
            clear: right;
            margin-inline-end: 2ch;
        }
        dl.definitions dd {
            float: right;
            margin-inline-start: unset;
            --definition-indent: 15ch;
            width: calc(100% - var(--definition-indent));
        }
    </style>

    <dl class="definitions">
        <dt> kjsfjk
        <dt> kjsfjk
        <dd>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur
            sint occaecat cupidatat non proident, sunt in culpa qui
            officia deserunt mollit anim id est laborum.
        <dt> kjsfjks sdf g fg dgf saf asf asf asdg ag
        <dd>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur
            sint occaecat cupidatat non proident, sunt in culpa qui
            officia deserunt mollit anim id est laborum.
        <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <dt> kjsfjks
        <dt> kjsfjks
        <dt> kjsfjks
        <dd>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <dd> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </dl>
</html>

score 1 · Answer 19 · answered Dec 12 '21 at 13:33

Here is my solution. It works like a charm

dl {
    display: inline-block;

    &::before {
        content: " ";
        display: table;
    }

    &::after {
        clear: both;
    }

    dt {
        margin-right: 5px;
        display: inline-block;
        float: left;
        clear: left;
    }

    dd {
        display: inline-block;
        float: left;
        padding-left: 0;
        margin-left: 0;
    }
}

score 0 · Answer 20 · answered Apr 09 '18 at 20:02

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 */
}

RoboTamer · Answer 21 · 2012-08-20T03:17:03.820

-8

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

edited Aug 20 '12 at 03:17

answered Aug 20 '12 at 03:03

RoboTamer

3,474
2
39
43

1

I would advise against repeating margin-left when it can be moved to the style sheet - they are there to prevent code duplication. Style sheet bloat can be counteracted with consistent design; but even then - if preventing bloat is to save network traffic, it is still saved by sticking it in the style sheet instead of the HTML. – Iiridayn May 30 '13 at 08:30
2

-1 sorry. Don't use inline styles, unless you really REALLY have no other option, otherwise, you will end up with a really messy html markup to start with. – MEM Sep 29 '14 at 15:16
I think this is an anti-pattern. – Denis Ivanov Jun 21 '15 at 17:29

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

21 Answers21

Linked

Related