Список определений со встроенными парами

Я пытаюсь создать список определений пар term-definition, каждая из которых существует на отдельной отдельной строке. Я пробовал сделать dt и dd display:inline, но затем я теряю разрывы строк между парами. Как я могу убедиться, что у меня есть строка для каждой пары (а не для каждого отдельного термина/определения)?

Пример:

<dl>
<dt>Term 1</dt><dd>Def 1</dd>
<dt>Term 2</dt><dd>Def 2</dd>
</dl>

получая:

Term 1 Def 1
Term 2 Def 2

CSS для их создания:

dt,dd{display:inline;}

получая:

Term 1 Def 1 Term 2 Def 2

... это не то, что я хочу (разрывы между парами отсутствуют).

Ответы

Ответ 1

Попробуйте следующее:

dt, dd { float: left }
dt { clear:both }

Добавьте margin-bottom в dt dd, если вам нужно больше пространства между ними.

Ответ 2

Другое решение:

dt:before {
  content: "";
  display: block;
}
dt, dd {
  display: inline;
}

Ответ 3

Я пробовал эти ответы, наконец, в итоге я получил этот.

Что я упростил:

  dl {    
    padding: 0.5em;
  }
  dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;    
  }
  dt:after {
    content: ":";
  }
  dd {
    margin: 0 0 0 110px;        
  }

Ответ 4

Другим решением является использование встроенных блоков и процентной ширины. Пока объединенная ширина dd + dt больше 50%.

dt, dd {
  display: inline-block;
}

dt {
  width: 50%;
}

dd {
  min-width: 5%;
}

Я нашел, что это дало мне более последовательное позиционирование элементов dd.

Ответ 5

Если у вас есть "зебра" backgronund или граница, разделяющая каждую пару DT-DD, то это будет работать красиво:

dt, dd { padding: 8px 6px; display: block;

}
dt {
    font-weight: 600;
    float: left;
    min-width: 50%;
    margin: 0 8px 0 0;
}
dd:nth-of-type(odd) {
    background: #eee;
}

код >

Это приведет к обертыванию обоих элементов в строке с серым фоном. Пока DT имеет меньшую вертикальную высоту, чем DD, что обычно происходит.

Пока еще не проверен браузер.

Ответ 6

Еще одно простое решение

dt {
    display: block;
    float: left;
    min-width: 100px;
}

https://jsbin.com/vumeyowana/edit?html,css,output

Ответ 7

Ответ Андрея Федосеева не работает в старых андроидах (биржевой браузер 4.3).

Это работает для этого браузера и всех других, которые я проверил:

dt::before {
  content: "\A";
  white-space: pre-wrap;
  display: block;
  height: .5em;
}

dt, dd {
  display: inline;
  margin: 0;
}

<dl>
  <dt>AM</dt>
  <dd>Description for am that should span more than one line at narrow screen widths.</dd>
  <dt>PM</dt>
  <dd>this means afternoon.</dd>
</dl>