CSS如何自动调整dt、dd宽度，实现dt适配文本dd占剩余空间

解决方案 #

直接使用CSS Grid布局即可实现你要的效果，无需手动逐行调整宽度：

实现原理 #

• 将dl元素设置为网格布局，通过grid-template-columns: auto 1fr定义两列布局：第一列（dt）宽度完全由内部文本长度自动适配，第二列（dd）自动占满剩余可用空间
• 移除原有的浮动、手动宽度设置相关代码即可

完整代码示例 #

div {
  width: 200px;
}

dl {
  width: 100%;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  /* 可选：调整dt和dd之间的间距 */
  column-gap: 8px;
  row-gap: 4px;
}

dt {
  padding: 0;
  white-space: nowrap; /* 可选：防止dt内文本换行 */
}

dd {
  margin: 0;
  box-sizing: border-box;
  border-bottom: 1px solid black;
}

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

内容的提问来源于stack exchange，提问作者CL So