Definition list <dl> elements on same on line?

[ferren]

Is there a way to force <dd> to start on the same line as <dt>? I'm making a Timeline; <table> works but causes a tag stew with classes on each <td>. All I want is a format like:

 

1861 Changes in CO2 might cause climate change.

1896 Arrhenius outlines effects of anthropogenic CO2.

1936 Callendar: doubling CO2 will raise temperature 2°C.

1972 Sawyer: by 2000, CO2 will increase by 25%, and

temperature by 0.6°C.

2014 Hansen: a legal case can be made for children to

sue the government ....

 

but it seems to be awkward to arrange in HTML!

[COBOLdinosaur]

you could try giving the dd and dt a style property of display:inline-block; though you might then need a <br /> to break the lines.

 

If you are using a table, you could simulat that without the table by styling them with display: table-cell

[dsonesuk]

Try

dd, dt{ display: block;float: left; }dt {clear: left;}

[Ingolme]

That's my usual solution. Often I'll set widths to them as well.

[ferren]

Thanks.

<div>

<style scoped>

dd, dt{ display: inline-block;float: left; }

dt {clear: left; width: 110px; margin-right: 12px; text-align: right;}

</style>

worked for short lines, but as predicted, one needs <br> for multi-line <dd>s, and this fails

when the page width changes. Also, I find zebra-striping useful here, and nth-child doesn't work on

<dl>s. So: back to borderless tables.

Sorry about the duplicate posting. Accidental.

[dsonesuk]

This should fix that

            dt {                float: left;                width: 60px;            }            dd{margin-left:60px;}