Jump to content

Definition list <dl> elements on same on line?


Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

<style scoped>
dd, dt{ display: inline-block;float: left; }
dt {clear: left; width: 110px; margin-right: 12px; text-align: right;}
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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...