Definition list with inline pairs

css list line inline definition

21,684

Solution 1

Try this:

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

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

Solution 2

Another solution:

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

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

Solution 4

Another simple solution

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

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

Solution 5

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.

View more solutions

21,684

krainert

Level designer by profession, coder by training, and all-around games making madman by heart.

Updated on December 31, 2020

Comments

krainert over 3 years
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).
- Diodeus - James MacFarlane over 10 years
  
  Please provide a complete, working code example, as per the question requirements in the FAQ.
- krainert over 10 years
  
  Does it need to be more complete than the one I added in the edit?
- Diodeus - James MacFarlane over 10 years
  
  Please include the related CSS.
- Diodeus - James MacFarlane over 10 years
  
  You just want more space between pairs?
- Diodeus - James MacFarlane over 10 years
  
  (I didn't vote to close)
Sandwich over 9 years

Actually, the combined width of dt + dd + dt needs to be more than 100% for this to work. I initially tried with a dt width of 25% and a dd min-width of 26%, but it didn't have the desired effect.
mlt over 8 years

This broke other things for me like p that followed dl ran over dl.
Ruskin over 7 years

This works in new browsers, but not in stock android 4.3 or before
ChrisW almost 7 years

@mlt To avoid that you also need dl { overflow: hidden; }
Paul Pichaureau over 6 years

Best answer, IMHO. I would prefer right-padding: 1em; over 'min-width`
Christian Oudard over 3 years

This is much better than float based solutions, because it maintains the vertical height of the <dl> element.
cmbuckley over 3 years

This solution is just what I wanted as it works well with text-align: center too. My only minor issue is that copying and pasting the text from the HTML results in one long line, because pseudo-elements are not selected.
Konrad Lötzsch over 3 years

this works only for descriptions that fit in one line.
randy almost 3 years

Adding dl { overflow: hidden; } did not help
Reggie Pinkham about 2 years

I used dd:after {...} Works a charm! Thanks