How to style dt and dd so they are on the same line?

Question

Using CSS, how can I style the following:

    
Mercury
    
Mercury (0.4 AU from the Sun) is the closest planet to th         


        

Answer 1

I recently needed to mix inline and non-inline dt/dd pairs, by specifying the class dl-inline on

elements that should be followed by inline

elements.

dt.dl-inline {
  display: inline;
}
dt.dl-inline:before {
  content:"";
  display:block;
}
dt.dl-inline + dd {
  display: inline;
  margin-left: 0.5em;
  clear:right;
}

    
The first term.
    
Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.
    
The second term.
    
Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.
    
The third term.
    
Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.
    
The fourth term
    
Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.