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
source share
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:

http://www.ulmanen.fi/stuff/dl.php

+7
source

Source: https://habr.com/ru/post/1737858/


All Articles