Definition list with inline pairs

问题

I'm trying to create a definition list of term-definition pairs, each pair existing on a single, separate line. I've tried making dts and dds display:inline, but then I lose the line breaks between the pairs. How do I make sure I have a line for each pair (and not for each individual term/definition)?

Example:

<dl>
<dt>Term 1</dt><dd>Def 1</dd>
<dt>Term 2</dt><dd>Def 2</dd>
</dl>

yielding:

Term 1 Def 1
Term 2 Def 2

The CSS for making them inline would be:

dt,dd{display:inline;}

yielding:

Term 1 Def 1 Term 2 Def 2

...which is not what I want (line breaks between pairs missing).

回答1:

Try this:

dt, dd { float: left }
dt { clear:both }

Add margin-bottom to dt dd if you'd like more space between them..

回答2:

Another solution:

dt:before {
  content: "";
  display: block;
}
dt, dd {
  display: inline;
}

回答3:

I tried these answers, finally I end up with this.

Which I simplified to:

  dl {    
    padding: 0.5em;
  }
  dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;    
  }
  dt:after {
    content: ":";
  }
  dd {
    margin: 0 0 0 110px;        
  }

回答4:

Another solution is to use inline-block and percentage widths. As long as the combined width of dd + dt is greater than 50%.

dt, dd {
  display: inline-block;
}

dt {
  width: 50%;
}

dd {
  min-width: 5%;
}

I found this gave me a more consistent positioning of the dd elements.

回答5:

Another simple solution

dt {
    display: block;
    float: left;
    min-width: 100px;
}

https://jsbin.com/vumeyowana/edit?html,css,output

回答6:

If you have a "zebra" backgronund or border separating each DT-DD pair, then this will work nicely:

dt, dd { padding: 8px 6px; display: block;

}
dt {
    font-weight: 600;
    float: left;
    min-width: 50%;
    margin: 0 8px 0 0;
}
dd:nth-of-type(odd) {
    background: #eee;
}

This will appear to wrap both items in a row with a grey background. As long as the DT has less vertical height than the DD - which is usually the case.

Haven't browser tested yet.

回答7:

Andrey Fedoseev's answer does not work in old android (stock browser 4.3).

This does work for that browser and all others I have checked:

dt::before {
  content: "\A";
  white-space: pre-wrap;
  display: block;
  height: .5em;
}

dt, dd {
  display: inline;
  margin: 0;
}

<dl>
  <dt>AM</dt>
  <dd>Description for am that should span more than one line at narrow screen widths.</dd>
  <dt>PM</dt>
  <dd>this means afternoon.</dd>
</dl>

来源：https://stackoverflow.com/questions/20692424/definition-list-with-inline-pairs

标签

css

list

line

inline

definition