Try this:
dt, dd { float: left }
dt { clear:both }
Add margin-bottom to dt dd
if you'd like more space between them..
Pergunta
I'm trying to create a definition list of term-definition pairs, each pair existing on a single, separate line. I've tried making dt
s and dd
s display:inline
, but then I lose the line breaks between the pairs. How do I make sure I have a line for each pair (and not for each individual term/definition)?
Example:
<dl>
<dt>Term 1</dt><dd>Def 1</dd>
<dt>Term 2</dt><dd>Def 2</dd>
</dl>
yielding:
Term 1 Def 1
Term 2 Def 2
The CSS for making them inline would be:
dt,dd{display:inline;}
yielding:
Term 1 Def 1 Term 2 Def 2
...which is not what I want (line breaks between pairs missing).
Solução 2
Try this:
dt, dd { float: left }
dt { clear:both }
Add margin-bottom to dt dd
if you'd like more space between them..
Outras dicas
Another solution:
dt:before {
content: "";
display: block;
}
dt, dd {
display: inline;
}
I tried these answers, finally I end up with this.
Which I simplified to:
dl {
padding: 0.5em;
}
dt {
float: left;
clear: left;
width: 100px;
text-align: right;
font-weight: bold;
}
dt:after {
content: ":";
}
dd {
margin: 0 0 0 110px;
}
Another solution is to use inline-block and percentage widths. As long as the combined width of dd + dt is greater than 50%.
dt, dd {
display: inline-block;
}
dt {
width: 50%;
}
dd {
min-width: 5%;
}
I found this gave me a more consistent positioning of the dd elements.
Another simple solution
dt {
display: block;
float: left;
min-width: 100px;
}
Andrey Fedoseev's answer does not work in old android (stock browser 4.3).
This does work for that browser and all others I have checked:
dt::before {
content: "\A";
white-space: pre-wrap;
display: block;
height: .5em;
}
dt, dd {
display: inline;
margin: 0;
}
<dl>
<dt>AM</dt>
<dd>Description for am that should span more than one line at narrow screen widths.</dd>
<dt>PM</dt>
<dd>this means afternoon.</dd>
</dl>
I wanted to be able to create a list with inline pairs, centrally aligned. Using dt:before { display; block}
worked well for this, but when copying text from a browser, pseudo elements are ignored so would end up being pasted like this:
Term 1: Def 1Term 2: Def 2
This is a minor issue, but there's another approach documented at MDN:
WHATWG HTML allows wrapping each name-value group in a
<dl>
element in a<div>
element. This can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes.
The following solution works well for this:
dt, dd {
display: inline;
}
<dl>
<div><dt>Term 1:</dt> <dd>Def 1</dd></div>
<div><dt>Term 2:</dt> <dd>Def 2</dd></div>
</dl>
If you have a "zebra" background or border separating each DT-DD pair, then this will work nicely:
dt, dd {
padding: 8px 6px;
display: block;
}
dt {
font-weight: 600;
float: left;
min-width: 50%;
margin: 0 8px 0 0;
}
dd:nth-of-type(odd) {
background: #eee;
}
This will appear to wrap both items in a row with a grey background. As long as the DT has less vertical height than the DD - which is usually the case.
(Haven't browser tested yet.)