CODEWITHSUNDEEP
htmlcssdd
CL So
CL So

Reputation: 3759

How to auto adjust dt dd width in css?

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%;
}
<div>
  <dl>
    <dt>aaabbbccc:</dt>
    <dd>&nbsp;</dd>
    <dt>aaabbb:</dt>
    <dd>&nbsp;</dd>
    <dt>aaa:</dt>
    <dd>&nbsp;</dd>
  </dl>
</div>

Upvotes: 2

Views: 572

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19109

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

Upvotes: 1

Related Questions