如何将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元素指定的宽度。