Sometimes, we want to style dt and dd so they are on the same line with CSS.
In this article, we’ll look at how to style dt and dd so they are on the same line with CSS.
How to style dt and dd so they are on the same line with CSS?
To style dt and dd so they are on the same line with CSS, we can use grid.
For instance, we write
<dl>
<dt>Mercury</dt>
<dd>Mercury ...</dd>
<dt>Venus</dt>
<dd>Venus ...</dd>
<dt>Earth</dt>
<dd>Earth ...</dd>
</dl>
to add the dl, dt, and dd elements.
Then we write
dl {
display: grid;
grid-template-columns: max-content auto;
}
dt {
grid-column-start: 1;
}
dd {
grid-column-start: 2;
}
to make the dl’s content display in a grid with display: grid;
.
Then we put the dt and dd into the grid columns with grid-column-start
.
Conclusion
To style dt and dd so they are on the same line with CSS, we can use grid.