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

Question

I'm looking for a list of definitions that are inline with their terms, so that

<dl>
  <dt>Email</dt><dd>contact@example.com</dd>
  <dt>Bio</dt><dd>Person's full-text bio, which spans multiple lines, and starts on the same line as the text <q>Bio</q>, just like the previous definitions. Any given solution should both allow this text to wrap below the &lt;dd&gt; and then provide a line break afterwards.</dd>
  <dt>Phone</dt><dd>(555) 123-4567</dd>
</dl>

Renders as:

Email: contact@example.com

Bio: Person's full-text bio, which spans multiple lines, and starts on the same line as the text “Bio”, just like the previous definitions. Any given solution should both allow this text to wrap below the <dd> and then provide a line break afterwards.

Phone: (555) 123-4567

I've already tried using dt,dd{display:inline}, but that caused all definitions to be displayed on one line with eachother.

I've already reviewed How to style dt and dd so they are on the same line? and it resulted in a more tabular layout, which won't work in this case.

For HTML5, try using CSS grid: https://stackoverflow.com/a/44599527/3853934 — krubo, Apr 06 '22 at 13:24
@krubo that question is already linked in this question, and produces a different result than this one requires. Also just to help you learn a bit more, that's CSS Grid Level 1, not HTML5 — Ky -, Apr 07 '22 at 17:00

vlasits · Accepted Answer · 2013-04-18T17:37:56.380

20

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/

edited Apr 18 '13 at 17:37

answered Apr 18 '13 at 14:51

vlasits

2,215
1
15
27

2

here, the margin is useless. if you look at his exemple,he doesn't mind if the text comes back under the dt – wazaminator Apr 18 '13 at 14:52
1

Good point and neither of our solutions gets the wrapping OP wants. – vlasits Apr 18 '13 at 14:55
I don't want to brag, but what is wrong with mine? for me, it works all right. Maybe I can correct myself if you point out the problem – wazaminator Apr 18 '13 at 15:03
This jsfiddle http://jsfiddle.net/sPQmw/2/ doesn't look like his example... at least, not in Chrome. Edit: wrong fiddle – vlasits Apr 18 '13 at 15:06
change all the `margin-start:0px;`s to `margin-left:0;` and we're good :3 – Ky - Apr 18 '13 at 16:18
This solution breaks if a dd has no content so if you don't have control over the content avoid this solution. I will post a solution that doesn't have this issue on this page. – smohadjer Jul 14 '22 at 06:46

wazaminator · Answer 2 · 2013-04-18T15:18:30.843

3

how about a dt { float: left; clear: left;}? The float will allow it to have a text in the right, and the clear prevent them from going in the same line.

EDIT : found a way, but it's not really great code : change the dd for a p, and add a margin-right to your dt.

here is the fidle : http://jsfiddle.net/sPQmw/13/

edited Apr 18 '13 at 15:18

answered Apr 18 '13 at 14:41

wazaminator

245
3
15

1

Also, the example fiddle you gave has `div`s as direct children of a `dl`, which I'd explicitly forbidden in the W3C definition of a `dl`. Also, you don't have any `dd`s, which kinda defeats the purpose. – Ky - Apr 03 '14 at 13:08

score 1 · Answer 3 · answered Jul 14 '22 at 06:51

1

To display a dl similar to ul, that is with each dt and its corresponding dd showing on the same line use following rules:

dl dt {
   float: left;
}

dl dd::after {
    display: block;
    content: '';
    clear: both;
}

answered Jul 14 '22 at 06:51

smohadjer

801
1
9
24

You've correctly pointed out a problem with my solution (above), but this css by itself does not create an "inline" effect. http://jsfiddle.net/7nqby25r/. However, when you combine it with my solution (http://jsfiddle.net/7nqby25r/2/) you can achieve what OP asked for. – vlasits Aug 29 '22 at 20:49

score -2 · Answer 4 · answered Apr 18 '13 at 15:26

If you can wrap each dt and dd pair in a <p>, you can use display: inline to get both onto the same line, while the <p> will force the next dt/dd pair to the next line.

HTML:

<dl>
    <p><dt>Email</dt><dd>contact@example.com</dd></p>
    <p><dt>Phone</dt><dd>(555) 123-4567</dd></p>
    <p><dt>Bio</dt><dd>Person's full-text bio, which spans multiple lines, and starts on the same line as the text <q>Bio</q>, just like the previous definitions. Any given solution should both allow this text to wrap below the &lt;dd&gt; and then provide a line break afterwards.</dd></p>
</dl>

CSS:

dt {
    display: inline-block;
}

dd { display: inline; }

JSFiddle: http://jsfiddle.net/fwAFq/

http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-dl-element `dl` elements must only contain `dt` and `dd` elements. +1 for a practically working solution, but I can't accept it because it's not _guaranteed_ to work, as it's invalid HTML. — Ky -, Apr 18 '13 at 15:34

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

4 Answers4

Linked