Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Make HTML <dt> and <dd> Elements Stay on the Same Line
HTML Description List or Definition List <dl> displays elements in dictionary format. The <dt> and <dd> tags are used together within the <dl> tag in HTML to define terms or give their description. Within a parent definition list, the <dd> element is used to pair a definition description with a sibling definition term enclosed in <dt> tags.
Example
Let us see an example of a simple description list.
<!DOCTYPE html> <html> <head> <title>Example of a description list</title> </head> <body> <p style="font-size:20px">A data definition list</p> <dl> <dt>Data term 1</dt> <dd>Data definition 1</dd> <dt>Data term 2</dt> <dd>Data definition 2</dd> <dt>Data term 3</dt> <dd>Data definition 3</dd> <dt>Data term 4</dt> <dd>Data definition 4</dd> </dl> </body> </html>
By default, <dt> and <dd> elements are not displayed on the same line. In this snippet, we will discuss some methods that use certain CSS properties to force the <dt> and its corresponding <dd> element to stay on the same line.
Using the CSS Float Property
The float property is used for content positioning and formatting. It is used to position elements to the left and right of its container, as well as to allow text and inline elements to wrap around it. It defines the page's content flow.
If an element is removed from the normal flow of the content, the remaining elements will be included in the flow. The elements that are absolutely positioned ignore this property. It can be written in a CSS file or directly specified in an element's style.
Syntax
Following is the syntax –
float: none|left|right;
Where,
none: It specifies that the element does not float. It is the default setting.
left: It specifies that the element floats on the left side of the container.
right: It specifies that the element floats on the right side of the container.
Example
In this example we use the left value of CSS float property and use percentages for the width property to make the <dt> and <dd> stay side by side.
<!DOCTYPE html>
<html>
<head>
<title>How to Make HTML <dt> and <dd> Elements Stay on the Same Line</title>
<style>
dl {
background:lightpink;
width: 100%;
overflow: hidden;
}
dt {
background:lavenderblush;
float: left;
width: 50%;
}
dd {
background:lavenderblush;
float: left;
width: 50%;
margin:0;
}
</style>
</head>
<body>
<dl>
<dt>Data term 1</dt>
<dd>
This line contains the definition for the data term 1.
</dd>
<dt>Data term 2</dt>
<dd>
This line contains the definition for the data term 2.
</dd>
</dl>
</body>
</html>
Using the ::after Pseudo Element
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is a generated content element that It can be used to insert any type of content, such as characters, text strings, and images. The content property determines its value. It is inline by default and like all other content, it can be animated, positioned, and floated.
Example
In the example below, we use the clear property with the float and add the ::after pseudo-element on the <dt> element.
<!DOCTYPE html>
<html>
<head>
<title>How to Make HTML <dt> and <dd> Elements Stay on the Same Line</title>
<style>
dl {
width:300px;
border: 2px solid saddlebrown;
padding:10px;
}
dt {
float: left;
clear: left;
width: 80px;
text-align: left;
}
dt::after {
content: " - ";
}
</style>
</head>
<body>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>
</body>
</html>
Using Flexbox
Flexbox is a one-dimensional layout method that allows users to arrange items in rows or columns. It excels at taking a collection of items of varying sizes and returning the best layout for those items. Instead of providing rigid dimensions for the browser to follow, flexbox allows you to provide flexible boundaries to hint at how the content might appear.
The flex container properties are:
flex-direction: It defines in which direction the container wants to stack the flex items.
flex-wrap: It specifies whether or not the flex items should be wrapped.
flex-flow: It is a shorthand property for the above two properties.
justify-content: It is used to align the flex items.
align-items: It is used to align the flex items.
align-content: It is used to align the flex lines.
The flex item properties are:
order: It specifies the order of the flex items.
flex-grow: It specifies the extent to which a flex item will grow in comparison to the other flex items.
flex-shrink: It specifies the extent to which a flex item will shrink in comparison to the other flex items.
flex-basis: It specifies the default length of a flex item.
flex: It is a shorthand property for the above three properties.
align-self: It specifies the alignment for the selected item inside the flexible container.
Example
In the following example, we add the flex-flow property with the “row wrap” value for the <dl> element. We also specify the flex-basis property for both the <dt> and <dd> elements and the flex-grow property for the <dd> element.
<!DOCTYPE html>
<html>
<head>
<title>How to Make HTML <dt> and <dd> Elements Stay on the Same Line</title>
<style>
dl {
width:250px;
display: flex;
flex-flow: row wrap;
border: 2px solid purple;
}
dt {
flex-basis: 20%;
padding: 2px 5px;
background:indigo ;
text-align: center;
color: #fff;
}
dd {
flex-basis: 70%;
flex-grow: 1;
margin: 0;
text-align: center;
padding: 2px 5px;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
</body>
</html>
246 Views
