How to make inline text from Description List (dl)

Question

So let's say we have this <dl></dl>:

<dl>
  <dt>Email:</dt><dd>contact@example.com</dd>
  <dt>Phone:</dt><dd>(555) 123-4567</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>

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

dd {
  float: left;
  margin-left: 0px;
}

And I aso used this JSFiddle to work with it. ^source

Now the output is:

Email:contact@example.comPhone:(555) 123-4567Bio:

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 and then provide a line break afterwards.Phone:(555) 123-4567

I want it to be inline like:

Email:contact@example.comPhone:(555) 123-4567Bio: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 and then provide a line break afterwards.Phone:(555) 123-4567

Is there any CSS solution?

why are you posting an EXACT duplicate of https://stackoverflow.com/questions/16085910/can-i-render-a-dt-on-the-same-line-as-its-dd?noredirect=1&lq=1 and not mention it ? I understand you want a different solution but you should mention that this has been asked before. Do not ' own ' the solution of that question as if it was yours — Mihai T, Mar 04 '20 at 14:14

score 3 · Accepted Answer · answered Mar 04 '20 at 14:23

Remove: float : left

add: display: inline; to whatever you want to be inline

fiddle: http://jsfiddle.net/47ntp52o/

read the display property doc here :

https://developer.mozilla.org/en-US/docs/Web/CSS/display

extra: check out what does float do to positioning :

https://developer.mozilla.org/en-US/docs/Web/CSS/float

xKobalt · Answer 2 · 2020-03-04T15:17:33.410

Try to add this in your CSS:

dl {
  min-inline-size: max-content;
}

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

dd {
  float: left;
  margin-left: 0px;
}

dl {
  min-inline-size: max-content;
}

<dl>
  <dt>Email:</dt><dd>contact@example.com</dd>
  <dt>Phone:</dt><dd>(555) 123-4567</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>

Then the last problem will be the overflow-x

Edit - Notice that this solution has compatibility issues

Edit-Add - I tried another solution:

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

dd {
  float: left;
  margin-left: 0px;
}

div {
  min-inline-size: max-content;
}

<div>
  <dl>
     <dt>Email:</dt><dd>contact@example.com</dd>
     <dt>Phone:</dt><dd>(555) 123-4567</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>
</div>
<div>
  <dl>
     <dt>Email:</dt><dd>contact@example.com</dd>
     <dt>Phone:</dt><dd>(555) 123-4567</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>
</div>

This works as you want, but this requires to put <dl> tags inside each <div> tag

this way it makes all in one line... but I need it to spred into multilines — AndrewS, Mar 04 '20 at 14:16
You should mention that this has compatibility issues https://caniuse.com/#search=min-inline-size — Mihai T, Mar 04 '20 at 14:16
As far as I see this can be only achived with jQuery, but I wander if there is CSS solution. — AndrewS, Mar 04 '20 at 14:21
Thanks about the information, is it correct now? @Temani Afif — xKobalt, Mar 04 '20 at 15:17

How to make inline text from Description List (dl)

2 Answers2