How to write <dt> and <dd> element on the same line using CSS ?
Last Updated :
02 Jun, 2020
The <dt> and <dd> tags are used together within the <dl> (defines a description list) tag in HTML to define terms or give their description. The <dt> tag is used to specify the description list. The <dd> tag stands for definition description and used to denote the description or definition of an item in a description list. The <dl> tag is used to represent the description list. This tag is used with <dt> and <dd> tags.
Example 1: This example uses <dt> and <dd> tags within <dl> tag and display the <dt> and <dd> content on different line.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
How to write dt and dd element
on the same line using CSS ?
</ title >
< style >
dt {
font-weight: bold;
color: green;
}
dt::after {
content: ":";
}
</ style >
</ head >
< body >
< dl >
< dt >Name</ dt >
< dd >Cristiano Ronaldo</ dd >
< dt >Date of birth</ dt >
< dd >5 February 1985 (age 35)</ dd >
< dt >Nationality</ dt >
< dd >Portugal</ dd >
< dt >Profession</ dt >
< dd >Footballer</ dd >
</ dl >
</ body >
</ html >
|
Output:
Example 2: This example uses <dt> and <dd> tags within <dl> tag and display the <dt> and <dd> content on the same line using CSS.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
dt {
float: left;
clear: left;
width: 110px;
font-weight: bold;
color: green;
}
dt::after {
content: ":";
}
dd {
margin: 0 0 0 80px;
padding: 0 0 0.5em 0;
}
</ style >
</ head >
< body >
< dl >
< dt >Name</ dt >
< dd >Cristiano Ronaldo</ dd >
< dt >Date of birth</ dt >
< dd >5 February 1985 (age 35)</ dd >
< dt >Nationality</ dt >
< dd >Portugal</ dd >
< dt >Profession</ dt >
< dd >Footballer</ dd >
</ dl >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...