如何将dt / dd列表上的背景填充为100％宽度？

Question

我的目标是为颜色不断变化的移动设备创建一个列表。

如果我使用百分比作为宽度，则可以将更改行填充为100％，但是如果使用px，则直到行结束时才会填充灰线：

由于这是移动版本，我想将dt的宽度设置为最长单词+ 5px的最大值，并将其余的行（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 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>

如何更改它以使100％的灰线和dt线设置为文本的最大长度+ 5px？

Answer 1

通过计算必要的宽度，您可以轻松获取dd元素以填充行的其余部分：

dd {
  width: calc(100% - 170px);
}

您需要在此处使用170px，因为dd和dt的填充均为5px。如果添加box-sizing: border-box，则可以在此处使用150px的“逻辑”值，该值与为dt元素指定的宽度相匹配。