Skip to content
Related Articles

Related Articles

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: 
 

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :