How to make <dl> layout horizontally?
I'm tryi开发者_运维知识库ng to develop a layout for my website in which elements of a definition list will be laid out horizontally, kind of like this:
term 1 term 2 term 3 definition 1 definition 2 definition 3
Anyone know a way to make a definition list look like this using valid CSS? Or if I can't do it with a <dl>
, what would be the recommended structure?
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 other styling as necessary. A working example can be found here:
http://www.ulmanen.fi/stuff/dl.php
Zombie question resurrection but the accepted answer totally breaks the whole reason for using a dl
in the first place. There's a better way.
From the HTML specification for DLs (emphasis mine):
In order to annotate groups with microdata attributes, or other global attributes that apply to whole groups, or just for styling purposes, each group in a dl element can be wrapped in a div element. This does not change the semantics of the dl element.
Of course, easily solved by flexbox.
dl {
display: flex;
justify-content: space-between;
}
/* Below is just styling. Adjust as needed. */
dt {
font-weight: bold;
}
dt,
dd {
margin: 0;
padding: 0;
}
/* Small screens */
@media screen and (max-width: 400px) {
dl {
flex-direction: column;
}
dl div {
padding: 1em 1em 0 1em;
}
}
<dl>
<div>
<dt>term 1</dt>
<dd>definition 1</dd>
</div>
<div>
<dt>term 2</dt>
<dd>definition 2</dd>
<dd>definition 2.1</dd>
<dd>definition 2.2</dd>
</div>
<div>
<dt>term 3</dt>
<dd>definition 3</dd>
</div>
<div>
<dt>term 4</dt>
<dd>definition 4</dd>
</div>
</dl>
精彩评论