How to remove indentation from an unordered list item using CSS?
Last Updated :
22 Apr, 2019
While designing web pages we used to add some list of items sometimes they are numbered (in various style) and sometimes they are bulleted (in various style). It might happen when we are trying to design a navigation bar or any kind list in which items are neither numbered nor bulleted we don’t need numbers or bullets and also no margin. To remove that indentation from an unordered list (a list having bullets) there needs styling to be done using CSS. The style will be implemented only on the list. So the selector would be ul.
Syntax:
ul {
// CSS Property
}
Example: This example creates a page with a list with zero(0) indent .
<!DOCTYPE html>
<html>
<head>
<title>
Remove indentation from an
unordered list of items
</title>
<style>
ul {
list-style:none;
padding-left:0;
}
</style>
</head>
<body>
<h3>Computer science subjects:</h3>
<ul>
<li>Data Structure</li>
<li>Algorithms</li>
<li>Operating System</li>
<li>Computer Network</li>
<li>DBMS</li>
<li>Web Technology</li>
</ul>
</body>
</html>
|
Output:
In the above example, padding-left property is used to set the indentation from left. The padding-left:0 is used to remove indentation (space) from left. The list-style: none property is used to remove list-style property from the list of items.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...