How to style dt and dd so they are on the same line?
HtmlCssHtml Problem Overview
Using CSS, how can I style the following:
<dl>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
so the content of the dt
show in one column and the content of the dd
in another column, with each dt
and the corresponding dd
on the same line? I.e. producing something that looks like:
Html Solutions
Solution 1 - Html
dl {
width: 100%;
overflow: hidden;
background: #ff0;
padding: 0;
margin: 0
}
dt {
float: left;
width: 50%;
/* adjust the width; make sure the total of both is 100% */
background: #cc0;
padding: 0;
margin: 0
}
dd {
float: left;
width: 50%;
/* adjust the width; make sure the total of both is 100% */
background: #dd0;
padding: 0;
margin: 0
}
<dl>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
Solution 2 - Html
I have got a solution without using floats!
check this on codepen
Viz.
dl.inline dd {
display: inline;
margin: 0;
}
dl.inline dd:after{
display: block;
content: '';
}
dl.inline dt{
display: inline-block;
min-width: 100px;
}
Update - 3rd Jan 2017: I have added flex-box based solution for the problem. Check that in the linked codepen & refine it as per needs.
dl.inline-flex {
display: flex;
flex-flow: row;
flex-wrap: wrap;
width: 300px; /* set the container width*/
overflow: visible;
}
dl.inline-flex dt {
flex: 0 0 50%;
text-overflow: ellipsis;
overflow: hidden;
}
dl.inline-flex dd {
flex:0 0 50%;
margin-left: auto;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
}
Solution 3 - Html
CSS Grid layout
> Like tables, grid layout enables an author to align elements into columns and rows.
> https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
To change the column sizes, take a look at the grid-template-columns
property.
dl {
display: grid;
grid-template-columns: max-content auto;
}
dt {
grid-column-start: 1;
}
dd {
grid-column-start: 2;
}
<dl>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
Solution 4 - Html
If you use Bootstrap 3 (or earlier)...
<dl class="dl-horizontal">
<dt>Label:</dt>
<dd>
Description of planet
</dd>
<dt>Label2:</dt>
<dd>
Description of planet
</dd>
</dl>
Solution 5 - Html
Assuming you know the width of the margin:
dt { float: left; width: 100px; }
dd { margin-left: 100px; }
Solution 6 - Html
Because I have yet to see an example that works for my use case, here is the most full-proof solution that I was able to realize.
dd {
margin: 0;
}
dd::after {
content: '\A';
white-space: pre-line;
}
dd:last-of-type::after {
content: '';
}
dd, dt {
display: inline;
}
dd, dt, .address {
vertical-align: middle;
}
dt {
font-weight: bolder;
}
dt::after {
content: ': ';
}
.address {
display: inline-block;
white-space: pre;
}
Surrounding
<dl>
<dt>Phone Number</dt>
<dd>+1 (800) 555-1234</dd>
<dt>Email Address</dt>
<dd><a href="#">example@example.com</a></dd>
<dt>Postal Address</dt>
<dd><div class="address">123 FAKE ST<br />EXAMPLE EX 00000</div></dd>
</dl>
Text
Strangely enough, it doesn't work with display: inline-block
. I suppose that if you need to set the size of any of the dt
elements or dd
elements, you could set the dl
's display as display: flexbox; display: -webkit-flex; display: flex;
and the flex
shorthand of the dd
elements and the dt
elements as something like flex: 1 1 50%
and display
as display: inline-block
. But I haven't tested that, so approach with caution.
Solution 7 - Html
See jsFiddle demo
I needed a list exactly as described for a project that showed employees at a company, with their photo on the left, and information on the right. I managed to accomplish the clearing by using psuedo-elements after every DD
:
.myList dd:after {
content: '';
display: table;
clear: both;
}
In addition, I wanted the text to only display to the right of the image, without wrapping under the floated image (pseudo-column effect). This can be accomplished by adding a DIV
element with the CSS overflow: hidden;
around the content of the DD
tag. You can omit this extra DIV
, but the content of the DD
tag will wrap under the floated DT
.
After playing with it a while, I was able to support multiple DT
elements per DD
, but not multiple DD
elements per DT
. I tried adding another optional class to clear only after the last DD
, but subsequent DD
elements wrapped under the DT
elements (not my desired effect… I wanted the DT
and DD
elements to form columns, and the extra DD
elements were too wide).
By all rights, this should only work in IE8+, but due to a quirk in IE7 it works there as well.
Solution 8 - Html
Here's another option that works by displaying the dt and dd inline and then adding a line break after the dd.
dt, dd {
display: inline;
}
dd:after {
content:"\a";
white-space: pre;
}
This is similar to Navaneeth's solution above, but using this approach, the content won't line up as in a table, but the dd will follow the dt immediately on every line regardless of length.
Solution 9 - Html
I need to do this and have the <dt>
content vertically centered, relative to the <dd>
content. I used display: inline-block
, together with vertical-align: middle
See full example on Codepen here
.dl-horizontal {
font-size: 0;
text-align: center;
dt, dd {
font-size: 16px;
display: inline-block;
vertical-align: middle;
width: calc(50% - 10px);
}
dt {
text-align: right;
padding-right: 10px;
}
dd {
font-size: 18px;
text-align: left;
padding-left: 10px;
}
}
Solution 10 - Html
You can use CSS Grid:
dl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
<dl>
<dt>Title 1</dt>
<dd>Description 1</dd>
<dt>Title 2</dt>
<dd>Description 2</dd>
<dt>Title 3</dt>
<dd>Description 3</dd>
<dt>Title 4</dt>
<dd>Description 4</dd>
<dt>Title 5</dt>
<dd>Description 5</dd>
</dl>
Solution 11 - Html
This works to display them as table, with border, it should be responsive with 3em the width of the first column. The word-wrap just breaks any words wider than the column
dl { display:block;
border:2px solid black;
margin: 1em;}
dt { display:inline-block;
width:3em;
word-wrap:break-word;}
dd { margin-left:0;
display:inline;
vertical-align:top;
line-height:1.3;}
dd:after { content:'';display:block; }
Comparison of <table>
with <dl>
:
<!DOCTYPE html>
<html>
<style>
dl { display:block;border:2px outset black;margin:1em; line-height:18px;}
dt { display:inline-block;width:3em; word-wrap:break-word;}
dd { margin-left:0; display:inline; vertical-align:top; line-height:1.3;}
dd:after { content:'';display:block; }
.glosstable { border:2px outset #aaaaaa;margin:1em; text-align:left}
.glosstable, table, tbody, tr, td, dl, dt {font-size:100%; line-height:18px;}
.glossaz { font-size:140%;padding-left:2em;font-weight:bold;color: #00838c; }
td.first {width: 2.5em;}
</style>
<body>
Table<br>
<table class="glosstable">
<tr><td class="first">Milk</td>
<td class="glossdata">Black hot drink</td>
</tr>
<tr><td class="first">Coffee2</td>
<td class="glossdata">Black hot drink</td>
</tr>
<tr><td>Warm milk</td>
<td class="glossdata">White hot drink</td>
</tr>
</table>
DL list <br>
<dl class="glosstablep">
<dt>Milk</dt>
<dd class="glossdata">White cold drink</dd>
<dt>Coffee2</dt>
<dd class="glossdata">Black cold drink</dd>
<dt>Warm Milk</dt>
<dd class="glossdata">White hot drink</dd>
</dl>
</body>
</html>
Solution 12 - Html
Depending on how you style the dt and dd elements, you might encounter a problem: making them have the same height. For instance, if you want to but some visible border at the bottom of those elements, you most probably want to display the border at the same height, like in a table.
One solution for this is cheating and make each row a "dl" element. (this is equivalent to using tr in a table) We loose the original interest of definition lists, but on the counterpart this is an easy manner to get pseudo-tables that are quickly and pretty styled.
THE CSS:
dl {
margin:0;
padding:0;
clear:both;
overflow:hidden;
}
dt {
margin:0;
padding:0;
float:left;
width:28%;
list-style-type:bullet;
}
dd {
margin:0;
padding:0;
float:right;
width:72%;
}
.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}
THE HTML:
<div class="huitCinqPts bord_inf_gc">
<dl><dt>Term1</dt><dd>Definition1</dd></dl>
<dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>
Solution 13 - Html
I've found a solution that seems perfect to me, but it needs extra <div>
tags.
It turns out that it is not necessary to use <table>
tag to align as in a table, it suffices to use display:table-row;
and display:table-cell;
styles:
<style type="text/css">
dl > div {
display: table-row;
}
dl > div > dt {
display: table-cell;
background: #ff0;
}
dl > div > dd {
display: table-cell;
padding-left: 1em;
background: #0ff;
}
</style>
<dl>
<div>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
</div>
<div>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
</div>
<div>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</div>
</dl>
Solution 14 - Html
I recently needed to mix inline and non-inline dt/dd pairs, by specifying the class dl-inline
on <dt>
elements that should be followed by inline <dd>
elements.
dt.dl-inline {
display: inline;
}
dt.dl-inline:before {
content:"";
display:block;
}
dt.dl-inline + dd {
display: inline;
margin-left: 0.5em;
clear:right;
}
<dl>
<dt>The first term.</dt>
<dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
<dt class="dl-inline">The second term.</dt>
<dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
<dt class="dl-inline">The third term.</dt>
<dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
<dt>The fourth term</dt>
<dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
</dl
>
Solution 15 - Html
This works on IE7+, is standards compliant, and allows differing heights.
<style>
dt {
float: left;
clear: left;
width: 100px;
padding: 5px 0;
margin:0;
}
dd {
float: left;
width: 200px;
padding: 5px 0;
margin:0;
}
.cf:after {
content:'';
display:table;
clear:both;
}
</style>
<dl class="cf">
<dt>A</dt>
<dd>Apple</dd>
<dt>B</dt>
<dd>Banana<br>Bread<br>Bun</dd>
<dt>C</dt>
<dd>Cinnamon</dd>
</dl>
Solution 16 - Html
Here is one possible flex-based solution (SCSS):
dl {
display: flex;
flex-wrap: wrap;
width: 100%;
dt {
width: 150px;
}
dd {
margin: 0;
flex: 1 0 calc(100% - 150px);
}
}
that works for the following HTML (pug)
dl
dt item 1
dd desc 1
dt item 2
dd desc 2
Solution 17 - Html
In my case I just wanted a line break after each dd
element.
Eg, I wanted to style this:
<dl class="p">
<dt>Created</dt> <dd><time>2021-02-03T14:23:43.073Z</time></dd>
<dt>Updated</dt> <dd><time>2021-02-03T14:44:15.929Z</time></dd>
</p>
like the default style of this:
<p>
<span>Created</span> <time>2021-02-03T14:23:43.073Z</time><br>
<span>Updated</span> <time>2021-02-03T14:44:15.929Z</time>
</p>
which just looks like this:
> Created 2021-02-03T14:23:43.073Z
> Updated 2021-02-03T14:44:15.929Z
To do that I used this CSS:
dl.p > dt {
display: inline;
}
dl.p > dd {
display: inline;
margin: 0;
}
dl.p > dd::after {
content: "\A";
white-space: pre;
}
Or you could use this CSS:
dl.p > dt {
float: left;
margin-inline-end: 0.26em;
}
dl.p > dd {
margin: 0;
}
I also added a colon after each dt
element with this CSS:
dl.p > dt::after {
content: ":";
}
Solution 18 - Html
I had a very similar issue. I wanted the definition on the same line but only if the terms didn't flow past its start position. In that case I wanted it to be on a new line. After much trial and error I found a solution that's surprisingly simple using floats.
<html>
<style>
dl.definitions, dl.definitions dt, dl.definitions dd {
display: block;
}
dl.definitions dt {
float: left;
clear: right;
margin-inline-end: 2ch;
}
dl.definitions dd {
float: right;
margin-inline-start: unset;
--definition-indent: 15ch;
width: calc(100% - var(--definition-indent));
}
</style>
<dl class="definitions">
<dt> kjsfjk
<dt> kjsfjk
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
<dt> kjsfjks sdf g fg dgf saf asf asf asdg ag
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
<dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<dt> kjsfjks
<dt> kjsfjks
<dt> kjsfjks
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</dl>
</html>
Solution 19 - Html
I usually start with the following when styling definition lists as tables:
dt,
dd{
/* Override browser defaults */
display: inline;
margin: 0;
}
dt {
clear:left;
float:left;
line-height:1; /* Adjust this value as you see fit */
width:33%; /* 1/3 the width of the parent. Adjust this value as you see fit */
}
dd {
clear:right;
float: right;
line-height:1; /* Adjust this value as you see fit */
width:67%; /* 2/3 the width of the parent. Adjust this value as you see fit */
}
Solution 20 - Html
Here is my solution. It works like a charm
dl {
display: inline-block;
&::before {
content: " ";
display: table;
}
&::after {
clear: both;
}
dt {
margin-right: 5px;
display: inline-block;
float: left;
clear: left;
}
dd {
display: inline-block;
float: left;
padding-left: 0;
margin-left: 0;
}
}
Solution 21 - Html
Most of what people here suggested works, however you should only place generic code in to the style sheet, and place the specific code in to the html code as shown below. Otherwise you will end up with a bloated style sheet.
Here is how I do it:
Your style sheet code:
<style>
dt {
float:left;
}
dd {
border-left:2px dotted #aaa;
padding-left: 1em;
margin: .5em;
}
</style>
Your html code:
<dl>
<dt>1st Entity</dt>
<dd style="margin-left: 5em;">Consumer</dd>
<dt>2nd Entity</dt>
<dd style="margin-left: 5em;">Merchant</dd>
<dt>3rd Entity</dt>
<dd style="margin-left: 5em;">Provider, or cToken direct to Merchant</dd>
<dt>4th Entity</dt>
<dd style="margin-left: 5em;">cToken to Provider</dd>
</dl>