How to make the location of the <dl> horizontal?
I'm trying to develop a layout for my site in which the elements of the definition list will be laid out horizontally, sort of like:
term 1 term 2 term 3 definition 1 definition 2 definition 3
Does anyone know a way to make a definition list look like this with valid CSS? Or, if I cannot do this with help <dl>, what would be the recommended structure?
+3
1 answer
This should do it:
<dl>
<dt>term 1</dt>
<dd>definition 1</dd>
</dl>
<dl>
<dt>term 2</dt>
<dd>definition 2</dd>
</dl>
<dl>
<dt>term 3</dt>
<dd>definition 3</dd>
</dl>
And in CSS:
dl {
float: left;
}
dl dd {
display: block;
margin: 0;
}
Apply a different style if necessary. A working example can be found here:
+7