html - 如何使 '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>