如何在css中自动调整dt dd宽度？

Question

我使用 dt 和 dd 创建纸质表单。

dt 宽度应该匹配单词，dl 应该匹配剩余空间

现在我手动调整每一行，如何使用 css 自动调整？

div {
  width: 200px;
}


/* dl dt dd same line */

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

dt {
  float: left;
  /* adjust the width; make sure the total of both is 100% */
  padding: 0;
}

dd {
  float: left;
  /* adjust the width; make sure the total of both is 100% */
  margin: 0;
  box-sizing: border-box;
  border-bottom: 1px solid black;
}

dl dt:nth-of-type(1) {
  width: 36%;
}

dl dd:nth-of-type(1) {
  width: 64%;
}

dl dt:nth-of-type(2) {
  width: 26%;
}

dl dd:nth-of-type(2) {
  width: 74%;
}

dl dt:nth-of-type(3) {
  width: 14%;
}

dl dd:nth-of-type(3) {
  width: 86%;
}

<div>
  <dl>
    <dt>aaabbbccc:</dt>
    <dd>&nbsp;</dd>
    <dt>aaabbb:</dt>
    <dd>&nbsp;</dd>
    <dt>aaa:</dt>
    <dd>&nbsp;</dd>
  </dl>
</div>

Answer 1

从语义上讲，ul 对您所呈现的内容更有意义。在您的示例中，dd 纯粹是针对布局的，但它不包含相关的定义内容。在li 上使用flex 显示，我们可以定位一个空的斜体元素来绘制底部边框下划线的其余部分，不管它需要多长。

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

div {
   width: 200px; 
}

div li {
  display: flex;
}

div li i {
  border-bottom: 1px solid;
  flex-grow: 1;
}

<div>
  <ul>
    <li><span>aaabbbccc:</span><i></i></li>
    <li><span>aaabbb:</span><i></i></li>
    <li><span>aaa:</span><i></i></li>
  </ul>
</div>

jsFiddle