Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to make a display in a horizontal row?
Displaying HTML elements in a horizontal row is a common layout requirement in web development. There are several CSS techniques to achieve this, including display: inline, display: inline-block, display: flex, and using HTML table structures. This article demonstrates three different approaches to create horizontal layouts.
CSS Display Properties for Horizontal Layout
The most common CSS properties for horizontal arrangement are
display: inline Elements flow horizontally but cannot have width/height set
display: inline-block Elements flow horizontally and can have dimensions
display: flex Modern flexible layout method with powerful alignment options
HTML tables Traditional method using
<table>,<tr>, and<td>elements
Method 1: Using display: inline for List Items
The display: inline property removes the default block behavior of list items, making them flow horizontally in a single line.
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal List Display</title>
<style>
.container {
border: 2px solid #333;
background-color: #f0f0f0;
padding: 15px;
text-align: center;
margin: 20px auto;
width: 500px;
}
.horizontal-list li {
display: inline;
margin: 0 15px;
padding: 8px 12px;
background-color: #4CAF50;
color: white;
border-radius: 4px;
}
.horizontal-list ul {
list-style: none;
padding: 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
<h2>User Information</h2>
<div class="horizontal-list">
<ul>
<li>Name: Sarah</li>
<li>Age: 28</li>
<li>City: New York</li>
<li>Job: Developer</li>
</ul>
</div>
</div>
</body>
</html>
The output shows list items arranged horizontally with styled backgrounds
User Information [Name: Sarah] [Age: 28] [City: New York] [Job: Developer] (Green rounded boxes in a horizontal row)
Method 2: Using HTML Table Structure
HTML tables naturally arrange content in rows and columns. Using <th> or <td> elements creates horizontal alignment automatically.
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Table Display</title>
<style>
.info-table {
border: 2px solid #2196F3;
background-color: #e3f2fd;
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
.info-table th {
padding: 15px;
border: 1px solid #1976D2;
background-color: #bbdefb;
font-weight: normal;
}
.info-table p {
margin: 0;
font-size: 14px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Paragraph Content in Horizontal Layout</h2>
<div style="margin-bottom: 30px;">
<h3>Original Vertical Layout</h3>
<p>First paragraph content</p>
<p>Second paragraph content</p>
<p>Third paragraph content</p>
<p>Fourth paragraph content</p>
</div>
<h3>Horizontal Table Layout</h3>
<table class="info-table">
<tr>
<th><p>First paragraph content</p></th>
<th><p>Second paragraph content</p></th>
<th><p>Third paragraph content</p></th>
<th><p>Fourth paragraph content</p></th>
</tr>
</table>
</body>
</html>
The table structure automatically arranges the paragraph content horizontally in equal-width columns
Original Vertical Layout First paragraph content Second paragraph content Third paragraph content Fourth paragraph content Horizontal Table Layout [First paragraph] [Second paragraph] [Third paragraph] [Fourth paragraph] (Blue bordered table cells in a row)
Method 3: Using display: inline-block for Images
The display: inline-block property is ideal for images as it maintains horizontal flow while allowing control over dimensions and spacing.
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Image Display</title>
<style>
.image-container {
border: 2px solid #FF5722;
background-color: #ffeaa7;
padding: 20px;
text-align: center;
margin: 20px auto;
width: 90%;
}
.image-container img {
display: inline-block;
margin: 10px;
border: 2px solid #ddd;
border-radius: 8px;
width: 120px;
height: 80px;
object-fit: cover;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="image-container">
<h2>Image Gallery - Horizontal Layout</h2>
<img src="https://via.placeholder.com/150x100/FF6B6B/ffffff?text=Image+1" alt="Sample Image 1">
<img src="https://via.placeholder.com/150x100/4ECDC4/ffffff?text=Image+2" alt="Sample Image 2">
<img src="https://via.placeholder.com/150x100/45B7D1/ffffff?text=Image+3" alt="Sample Image 3">
<img src="https://via.placeholder.com/150x100/96CEB4/ffffff?text=Image+4" alt="Sample Image 4">
</div>
</body>
</html>
The images are displayed in a horizontal row with consistent sizing and spacing
Image Gallery - Horizontal Layout [Image 1] [Image 2] [Image 3] [Image 4] (Four colorful placeholder images arranged horizontally with rounded borders)
Method 4: Modern Flexbox Approach
CSS Flexbox provides the most flexible and modern approach for horizontal layouts with powerful alignment and spacing options.
Example
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Horizontal Layout</title>
<style>
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #e8f5e8;
border: 2px solid #4CAF50;
padding: 20px;
margin: 20px;
min-height: 100px;
}
.flex-item {
background-color: #81C784;
color: white;
padding: 15px 20px;
border-radius: 6px;
font-weight: bold;
text-align: center;
min-width: 100px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Flexbox Horizontal Layout</h2>
<div class="flex-container">
<div class="flex-item">HTML</div>
<div class="flex-item">CSS</div>
<div class="flex-item">JavaScript</div>
<div class="flex-item">React</div>
</div>
</body>
</html>
Flexbox automatically distributes items evenly across the horizontal space with perfect alignment
Flexbox Horizontal Layout
[HTML] [CSS] [JavaScript] [React]
(Green rounded boxes evenly spaced in a horizontal flex container)
1K+ Views
