- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
Changing the Position of List Markers using CSS
The list-style-position property is used to set the position of the list-item markers.
Example
Let us now see an example −
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
list-style-position: outside;
}
ul.demo2 {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>Teams</h1>
<h2>ODI Teams</h2>
<ul class="demo1">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
<h2>Test Teams</h2>
<ul class="demo2">
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</ul>
</body>
</html>Output
Updated on 30-Dec-2019 12:01:34
- Related Questions & Answers
- Changing the Position of List Markers in CSS
- Using Images as List Markers in CSS
- In CSS using Images as List Markers
- Changing the look of Cursor using CSS
- Changing the Default Display Value using CSS
- Usage of CSS list-style-position property
- Controlling the Position of Table Caption using CSS
- Reversing array without changing the position of certain elements JavaScript
- Setting Background Position using CSS
- Arrangement of words without changing the relative position of vowel and consonants?
- Style unordered lists markers with CSS
- Aligning elements using the position property in CSS
- Changing Layouts Based on Screen Size using CSS
- Role of CSS position: sticky;
- Changing Column Width Based on Screen Size using CSS
Advertisements