Как сделать встроенный текст из списка описания (dl)

Question

Допустим, у нас есть это <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;
}

И я также использовал это JSFiddle для работы с ним. ^{источник}

Теперь вывод:

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

Полнотекстовая биография человека, которая состоит из нескольких строк и начинается с той же строки, что и текст биографии, как и предыдущие определения. Любое данное решение должно позволять оборачивать этот текст ниже и затем предоставлять разрыв строки. Телефон :(555) 123-4567

Я хочу, чтобы он был встроенным, как:

Email:contact@example.comPhone :( 555) 123-4567Bio: полнотекстовая биография человека, которая состоит из нескольких строк и начинается в той же строке, что и текст биографии, как и в предыдущих определениях. Любое данное решение должно позволять переносить этот текст ниже, а затем предоставлять разрыв строки. Телефон :(555) 123-4567

Есть ли какое-либо решение CSS?

Answer 1

Удалить: float : left

добавить: display: inline; к тому, что вы хотите, чтобы быть встроенным

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

читать свойство display делает c здесь:

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

extra: проверьте, что делает float с позиционированием:

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

Answer 2

Попробуйте добавить это в 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>

Тогда последняя проблема будет overflow-x

Редактировать - Обратите внимание, что это решение имеет проблемы совместимости

Edit-Add - я попробовал другое решение:

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>

Это работает так, как вы хотите, но для этого необходимо поместить <dl> теги внутри каждого <div> тега