Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Remove Indentation from Unordered List Item Using CSS
To remove indentation from an unordered list item using CSS, we will be understanding various approaches. Indentation is a common feature used to give a visual hierarchy to the list items. In this article, we will be going through five different approaches to remove indentation from an unordered list item using CSS.
We are having an unordered list of different programming languages, our task is to remove the indentation from unordered list using CSS.
Approaches to Remove Indentation from an Unordered List Item
Here is a list of approaches to remove indentation from an unordered list item using CSS which we will be discussing in this article with stepwise explaination and complete example codes.
- Remove Indentation With padding
- Remove Indentation Using display Property
- Remove Indentation Using translate() Function
- Remove Indentation Using margin-left Property
- Remove Indentation Using left Property
Remove Indentation With padding
In this approach to remove indentation from an unordered list item, we have used CSS padding property. We can also use CSS padding-left property to remove indentation.
- First we have created an unordered list using ul tag and added list items using li tag.
- We have used "list-style-type: none;" property to remove the default marker of the unordered list.
- After removing default markers, we have used "padding: 0;" which removes the default padding applied by browser on ul element.
- We can also use "padding-left:0;" property, it has same effect as padding:0;.
Example
Here is a complete example code implementing above mentioned steps to remove indentation from an unordered list item using padding property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Remove indentation from an unordered list item
using CSS
</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
</style>
</head>
<body>
<h3>
Remove Indentation from an Unordered List Item
Using CSS
</h3>
<p>
In this example we have used CSS <strong>padding
</strong> property to remove indentation from an
unordered list item using CSS.
</p>
<ul>
<strong>Programming Languages:</strong>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>C</li>
</ul>
</body>
</html>
Remove Indentation Using display Property
In this approach we have used display property which makes ul element disappear using contents value.
- We have used "list-style-type: none;" property to remove the default marker of the unordered list.
- After removing default markers, we have used "display: contents;" property which makes the ul element disappear but list-items remains as child elements of HTML document removing indentation.
Example
Here is a complete example code implementing above mentioned steps to remove indentation from an unordered list item using display property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Remove indentation from an unordered list item
using CSS
</title>
<style>
ul {
display: contents;
list-style-type: none;
}
</style>
</head>
<body>
<h3>
Remove Indentation from an Unordered List Item
Using CSS
</h3>
<p>
In this example we have used CSS <strong>display:
contents</strong> property to remove indentation
from an unordered list item using CSS.
</p>
<ul>
<strong>Programming Languages:</strong>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>C</li>
</ul>
</body>
</html>
Remove Indentation Using translate() Function
In this method, we have used translate() function of transform property which can be used to move any element to different position by specified value.
- We have used "list-style-type: none;" property to remove the default marker of the unordered list.
- We have used "transform: translate(-40px);" property which shifts the listem items in negative x direction by 40px
Example
Here is a complete example code implementing above mentioned steps to remove indentation from an unordered list item using translate() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Remove indentation from an unordered list item
using CSS
</title>
<style>
ul {
list-style-type: none;
transform: translate(-40px);
}
li {
display: block;
}
</style>
</head>
<body>
<h3>
Remove Indentation from an Unordered List Item
Using CSS
</h3>
<p>
In this example we have used CSS <strong>translate()
</strong> function to remove indentation from
an unordered list item using CSS.
</p>
<ul>
<strong>Programming Languages:</strong>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>C</li>
</ul>
</body>
</html>
Remove Indentation Using margin-left Property
In this approach to remove indentation from unordered list-item, we have used CSS margin-left property which sets the left margin space of an element.
- We have used "list-style-type: none;" property to remove the default marker of the unordered list.
- After removing default marker, we have used "margin-left:-40px;" which moves list items to the left by 40px removing the indentation.
Example
Here is a complete example code implementing above mentioned steps to remove indentation from an unordered list item using CSS margin-left property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Remove indentation from an unordered list item
using CSS
</title>
<style>
ul {
list-style-type: none;
margin-left:-40px;
}
</style>
</head>
<body>
<h3>
Remove Indentation from an Unordered List Item
Using CSS
</h3>
<p>
In this example we have used CSS <strong>margin-
left</strong> property to remove indentation from
an unordered list item using CSS.
</p>
<ul>
<strong>Programming Languages:</strong>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>C</li>
</ul>
</body>
</html>
Remove Indentation Using left Property
In this approach, we have used CSS left property which specifies horizontal position of a positioned element relative to its containing element. Here we have set it's position to relative.
- We have used "list-style-type: none;" property to remove the default marker of the unordered list.
- After removing default marker, we have used "left:-40px;" which moves list items to the left by 40px removing the indentation.
Example
Here is a complete example code implementing above mentioned steps to remove indentation from an unordered list item using CSS left property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Remove indentation from an unordered list item
using CSS
</title>
<style>
ul {
list-style-type: none;
}
li {
position: relative;
left: -40px;
}
</style>
</head>
<body>
<h3>
Remove Indentation from an Unordered List Item
Using CSS
</h3>
<p>
In this example we have used CSS <strong>left
</strong> property to remove indentation from
an unordered list item using CSS.
</p>
<strong>Programming Languages:</strong>
<ul>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>C</li>
</ul>
</body>
</html>
Conclusion
In this article, to remove indentation from an unordered list item using CSS, we have used five different approaches which are: by using padding property, display property, translate() method of transform property, margin-left property and left property. Any approach can be used but padding is the most common approach used.
6K+ Views
