如何使“ dl”内容单词以表“ td”的方式包装？

Question

我试图尽可能避免使用表格进行格式化。

在表中，如果第二行中的单元格需要包装，则只会包装在该单元格内。当我尝试使用列表（dl）时，“第二列”（dd）包装在整行下。

dt {
  display: block;
  float: left;
  text-align: right;
  color: black;
  width: 150px;
}

dt::after {
  content: ":";
  padding-left: .5em;
  padding-right: .5em;
}

dd {
  display: block;
  color: blue;
}

<dl>
  <dt>System Type</dt>
  <dd>My System Type</dd>
  <dt>Manufacturer</dt>
  <dd>Very very very very very long second column</dd>
</dl>

输出屏幕截图：

Answer 1

我认为您必须对第一列的宽度进行硬编码，这是我能够取得任何进步的唯一方法，但是我认为这就是您想要的。完全应得的荣誉，我受this answer的启发，它使用了百分比。在这种情况下，如果您使用像素对宽度进行硬编码，则结果会更好，因此，最终不会像在百分比上那样在“列”之间增加/缩小间隙。

您必须调整120px的值以适合您的需求，这是使用两个提供的值看起来最好的地方。

* {
    margin: 0;
}
dl {
    width: 100%;
}
dt {
    float: left;
    text-align: right;
    /* Hard code the width of the first column here */
    width: 120px;
}
dt::after {
    content: ":";
    padding-left: .5em;
    padding-right: .5em;
}
dd {
    float: left;
    /* Hard code the width of the 2nd column here...
       ... make it take up all the remaining space of the parent
    */
    width: calc(100% - 120px);
}

<dl>
    <dt>System Type</dt><dd>My System Type</dd>
    <dt>Manufacturer</dt><dd>Very very very very very long second column Very very very very very long second column Very very very very very long second column Very very very very very long second column Very very very very very long second column</dd>
</dl>