CODEWITHSUNDEEP
htmlcss
kayjay00
kayjay00

Reputation: 35

How to get multiple dl/dt/dd tags on the same line

I need to get multiple information on the same line this:

Name: Robert Age: 10 Gender: Male

Where the labels are different colors from the value. How would I do this?

Upvotes: 1

Views: 1939

Answers (1)

Stickers
Stickers

Reputation: 78696

The dt and dd tags have display: block set from the browser. Just reset that to display: inline or inline-block to make them on the same line.

dt, dd {
  display: inline-block;
  margin: 0;
}
dt {
  font-weight: bold;
}
dt:after {
  content: ":";
}
<dl>
  <dt>Name</dt>
  <dd>Robert</dd>
  <dt>Age</dt>
  <dd>10</dd>
  <dt>Gender</dt>
  <dd>Male</dd>
</dl>

Upvotes: 4

Related Questions