дт / дд в той же строке изменяет на разрыв строки

Question

У меня есть компоновка листинга с dt / dd, которая показывает пары ключ / значение в одной строке.

Если ключ слишком длинный, это приведет к разрыву строки, что приведет к неправильному началуследующего ключа:

Это мой код:

dl {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 150px;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  padding: 0;
  margin: 0
}
.attributelist-striped .attributelist--key:nth-of-type(odd), .attributelist-striped .attributelist--value:nth-of-type(odd) {
    background-color: #f0f0f0;
}
.attributelist-striped .attributelist--key, .attributelist-striped .attributelist--value {
    padding: 5px;
}

<section>
    <dl class="attributelist-striped">
        <dt class="attributelist--key">Matterial Armband:</dt>
        <dd class="attributelist--value">Gold/Stahl</dd>
        <dt class="attributelist--key">Matterial Gehäuse:</dt>
        <dd class="attributelist--value">Gelbgold mit Stahl</dd>
     </dl>
</section>

Как это можно улучшить?

* изменить, чтобы проиллюстрировать изменение, основанное на ответе @Johannes *

Answer 1

Просто добавьте clear: left к dl, чтобы избежать описанного эффекта (который вызван плавающими элементами неравной высоты) и принудительно вставлять каждый dl в новую строку:

dl {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0
}

dt {
  float: left;
  clear: left;
  width: 150px;
  padding: 0;
  margin: 0
}

dd {
  float: left;
  padding: 0;
  margin: 0
}

.attributelist-striped .attributelist--key:nth-of-type(odd),
.attributelist-striped .attributelist--value:nth-of-type(odd) {
  background-color: #f0f0f0;
}

.attributelist-striped .attributelist--key,
.attributelist-striped .attributelist--value {
  padding: 5px;
}

<section class="l-container" itemprop="offerDetails" itemscope="" itemtype="http://data-vocabulary.org/Offer">
  <meta itemprop="price" content="6.390">
  <meta itemprop="currency" content="&euro;">
  <dl class="attributelist-striped">
    <dt class="attributelist--key">Matterial Armband:</dt>
    <dd class="attributelist--value">Gold/Stahl</dd>

    <dt class="attributelist--key">Matterial Gehäuse:</dt>
    <dd class="attributelist--value">Gelbgold mit Stahl</dd>
  </dl>
</section>

ДОПОЛНЕНИЕ после комментария и редактирования вопроса:

На самом деле, я бы использовал для этого структуру таблицы, в которой левое поле в каждой строке представляет собой элемент th (метка), а правый элемент - td (данные):

table {
  border-collapse: collapse;
  width: 100%;
  overflow: hidden;
}
th {
  width: 150px;
  padding: 5px;
  text-align: left;
}

td {
  padding: 5px;
}

.attributelist-striped:nth-of-type(odd) {
  background-color: #f0f0f0;
}

<section class="l-container" itemprop="offerDetails" itemscope="" itemtype="http://data-vocabulary.org/Offer">
<table>
  <meta itemprop="price" content="6.390">
  <meta itemprop="currency" content="&euro;">
  <tr class="attributelist-striped">
    <th class="attributelist--key">Matterial Armband:</th>
    <td class="attributelist--value">Gold/Stahl</td>
  </tr>
  <tr class="attributelist-striped">
    <th class="attributelist--key">Matterial Gehäuse:</th>
    <td class="attributelist--value">Gelbgold mit Stahl</td>
  </tr>
  <tr class="attributelist-striped">
    <th class="attributelist--key">Matterial Armband:</th>
    <td class="attributelist--value">Gold/Stahl</td>
  </tr>
  <tr class="attributelist-striped">
    <th class="attributelist--key">Matterial Gehäuse:</th>
    <td class="attributelist--value">Gelbgold mit Stahl</td>
  </tr>
 </table>
</section>

Answer 2

Раньше это было недопустимо, но теперь вы можете обернуть dd / dt пары ключ / значение в div, что позволит вам очистить эти поплавки и упростить ваш CSS.Поскольку divs являются блочными элементами, чередующийся цвет фона для каждой строки будет более равномерным.

dl {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0
}
dt {
    float: left;
    width: 150px;
    padding: 0;
    margin: 0
}
dd {
    float: left;
    padding: 0;
    margin: 0
}
.attributelist-striped > div:nth-child(odd) {
    background-color: #f0f0f0;
}
.attributelist-striped .attributelist--key,
.attributelist-striped .attributelist--value {
    padding: 5px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<section>
    <dl class="attributelist-striped">
        <div class="clearfix">
            <dt class="attributelist--key">Matterial Armband:</dt>
            <dd class="attributelist--value">Gold/Stahl</dd>
        </div>
        <div class="clearfix">
            <dt class="attributelist--key">Matterial Gehäuse:</dt>
            <dd class="attributelist--value">Gelbgold mit Stahl</dd>
        </div>
        <div class="clearfix">
            <dt class="attributelist--key">Matterial Armband:</dt>
            <dd class="attributelist--value">Gold/Stahl</dd>
        </div>
        <div class="clearfix">
            <dt class="attributelist--key">Matterial Gehäuse:</dt>
            <dd class="attributelist--value">Gelbgold mit Stahl</dd>
        </div>
     </dl>
</section>