我使用DT和DD来创建纸质表单。

DT宽度应与单词匹配，DL应与剩余空间

现在我手动调整每一行，我如何使用CSS自动做到这一点？

<代码>DIV{宽度：200px；}/*DL DT DD同一行*/DL{宽度：100%；溢出：隐藏；填充：0；边距：0}DT{浮动：左；/*调整宽度；确保两者的总和为100%*/填充：0；}DD{浮动：左；/*调整宽度；确保两者的总和为100%*/保证金：0；框大小：border-box；边框-底部：1px纯黑色；}DL DT：类型的第n个（1）{宽度：36%；}DL DD：类型的第n个（1）{宽度：64%；}DL DT：类型的第n个（2）{宽度：26%；}DL DD：类型的第n个（2）{宽度：74%；}DL DT：类型的第n个（3）{宽度：14%；}DL DD：类型的第n个（3）{宽度：86%；}

<代码><；细分（>；）<；DL>；<；DT>；aaabbbccc：<；/DT>；<；DD>；&；nbsp；<；/DD>；<；DT>；aaabbb：<；/DT>；<；DD>；&；nbsp；<；/DD>；<；DT>；AAA：<；/DT>；<；DD>；&；nbsp；<；/DD>；<；/DL>；<；/DIV>；

顺晟科技：

从语义上讲，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>仅用于布局，但它不包含相关的定义内容。在ul上使用dd显示，我们可以针对一个空的斜体元素来绘制底部边框下划线的剩余部分，无论它需要多长。

<代码>UL，Li{保证金：0；填充：0；列表样式：无；}迪夫{宽度：200px；}迪夫里{显示：Flex；}迪夫·李一{底部边框：1px实心；灵活增长：1；}

<代码><；细分（>；）<；UL>；<；Li>；<；span>；aaabbbccc：<；/span>；<I>；<；/I>；<；/Li>；<；Li>；<；span>；aaabbb：<；/span>；<I>；<；/I>；<；/Li>；<；Li>；<；SPAN>；AAA：&；lt；/SPAN>；&；I>；<；/I>；<；/Li>；<；/UL>；<；/DIV>；

Jsfiddle