Как стилизовать dt и dd, чтобы они были на одной линии?

Question

Используя CSS, как я могу стилизовать следующее:

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

поэтому содержимое dt отображается в одном столбце, а содержимое dd - в другом столбце, где каждый dt и соответствующий dd находятся в одной строке? То есть производя что-то похожее на:

Answer 1

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>

Answer 2

У меня есть решение без использования поплавков!
отметьте это 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;
}

Обновление - 3 ^rd Янв 2017: Я добавил решение проблемы на основе flex-box. Проверьте это в связанном codepen и уточните его в соответствии с потребностями. Спасибо!

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

Answer 3

Если вы используете Bootstrap 3 (или более раннюю версию) ...

<dl class="dl-horizontal">
    <dt>Label:</dt>
    <dd>
      Description of planet
    </dd>
    <dt>Label2:</dt>
    <dd>
      Description of planet
    </dd>
</dl>

Answer 4

CSS Grid layout

Как и таблицы, макет сетки позволяет автору выравнивать элементы по столбцам и строкам.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Чтобы изменить размеры столбцов, обратите внимание на свойство grid-template-columns.

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>

Answer 5

Если вы знаете ширину поля:

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

Answer 6

Поскольку я еще не видел пример, который подходит для моего варианта использования, вот наиболее полное решение, которое я смог реализовать.

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

Как ни странно, он не работает с display: inline-block. Я полагаю, что если вам нужно установить размер любого из элементов dt или dd, вы можете установить отображение dl как display: flexbox; display: -webkit-flex; display: flex; и сокращение flex элементов dd и элементы dt как что-то вроде flex: 1 1 50% и display как display: inline-block. Но я этого не проверял, поэтому подходите осторожно.

Answer 7

См. jsFiddle demo

Мне нужен был список, точно такой же, как описанный для проекта, в котором были показаны сотрудники компании, с их фотографией слева и информацией справа. Мне удалось выполнить очистку с помощью psuedo-элементов после каждого DD:

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

Кроме того, я хотел, чтобы текст отображался только справа от изображения, без переноса под плавающее изображение (эффект псевдостолбца). Это может быть достигнуто путем добавления элемента DIV с CSS overflow: hidden; вокруг содержимого тега DD. Вы можете опустить этот дополнительный DIV, но содержимое тега DD будет заключено в плавающий DT.

Поработав некоторое время, я смог поддерживать несколько DT элементов на DD, но не несколько DD элементов на DT. Я попытался добавить еще один необязательный класс для очистки только после последних DD, но последующих элементов DD, заключенных в элементы DT (не мой желаемый эффект… Я хотел, чтобы элементы DT и DD формировали столбцы, и дополнительные элементы DD были слишком широкими). ​​

По всем правилам, это должно работать только в IE8 +, но из-за причуд в IE7 оно также работает там.

Answer 8

Мне нужно сделать это, и содержимое <dt> будет отцентрировано вертикально относительно содержимого <dd>. Я использовал display: inline-block вместе с vertical-align: middle

См. Полный пример на Codepen здесь

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

Answer 9

Вот еще одна опция, которая работает, отображая dt и dd inline, а затем добавляя разрыв строки после dd.

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

Это похоже на решение Navaneeth, описанное выше, но при таком подходе содержимое не будет выстраиваться в соответствие с таблицей, но dd будет следовать за dt сразу в каждой строке независимо от длины.

Answer 10

Я нашел решение, которое кажется мне идеальным, но для этого нужны дополнительные <div> теги. Оказывается, что для выравнивания, как в таблице, не нужно использовать тег <table>, достаточно использовать стили display:table-row; и display:table-cell;:

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