How to auto adjust dt dd width in css?

Question

I use dt and dd to create a paper form.

dt width should match the word and dl should match remain space

Now I adjust each line manually, how can I use css to auto do this?

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%;
}


  
    aaabbbccc:
     
    aaabbb:
     
    aaa:

user_949217 · Answer

Semantically, a ul makes more sense for what you're presenting. In your example, the dd is being targeted purely for layout, yet it contains no relevant definition content. Using a flex display on the li, we can target an empty italics element to draw the remainder of the bottom border underline, however long it needs to be.

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;
}


  
    aaabbbccc:
    aaabbb:
    aaa:

jsFiddle

How to auto adjust dt dd width in css?

1 Answers