Different Ordered Lists (#28137)
Added in a section to show how to display a list ordered by roman numerals or letters rather than just numbers.
This commit is contained in:
@ -48,17 +48,24 @@ and is displayed as:
|
|||||||
|
|
||||||
Ordered and unordered lists can have different list item markers. The default numbering system in ordered list can be changed to lowercase or uppercase roman numerals, as well as lowercase or uppercase alphabetical. The start of the list can be changed from the default value of 1. In an unordered list, different list markers can be used like the disc, circle, square etc.
|
Ordered and unordered lists can have different list item markers. The default numbering system in ordered list can be changed to lowercase or uppercase roman numerals, as well as lowercase or uppercase alphabetical. The start of the list can be changed from the default value of 1. In an unordered list, different list markers can be used like the disc, circle, square etc.
|
||||||
|
|
||||||
Styling Ordered List:
|
An ordered list can also be programmed to display roman numerals or letters instead of numbers.
|
||||||
|
|
||||||
|
Roman numerals:
|
||||||
```CSS
|
```CSS
|
||||||
ol {
|
<ol type="I">
|
||||||
list-style-type: upper-roman;
|
<li>Dogs</li>
|
||||||
}
|
<li>Cats</li>
|
||||||
|
<li>Birds</li>
|
||||||
|
</ol>
|
||||||
```
|
```
|
||||||
Styling Unordered List:
|
|
||||||
|
Letters:
|
||||||
```CSS
|
```CSS
|
||||||
ul {
|
<ol type="A">
|
||||||
list-style-type: square;
|
<li>Dogs</li>
|
||||||
}
|
<li>Cats</li>
|
||||||
|
<li>Birds</li>
|
||||||
|
</ol>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Styling Bulletpoints
|
## Styling Bulletpoints
|
||||||
@ -140,37 +147,6 @@ is displayed as:
|
|||||||
- Green tea
|
- Green tea
|
||||||
- Milk
|
- Milk
|
||||||
|
|
||||||
## Nested HTML Lists
|
|
||||||
|
|
||||||
List can be nested (lists inside lists):
|
|
||||||
|
|
||||||
##### Code:
|
|
||||||
```html
|
|
||||||
<ul>
|
|
||||||
<li>Coffee</li>
|
|
||||||
<li>Tea
|
|
||||||
<ul>
|
|
||||||
<li>Black tea</li>
|
|
||||||
<li>Green tea</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>Milk</li>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
||||||
##### Output:
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>Coffee</li>
|
|
||||||
<li>Tea
|
|
||||||
<ul>
|
|
||||||
<li>Black tea</li>
|
|
||||||
<li>Green tea</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>Milk</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
#### More Information:
|
#### More Information:
|
||||||
|
|
||||||
* [HTML lists on w3schools](https://www.w3schools.com/html/html_lists.asp)
|
* [HTML lists on w3schools](https://www.w3schools.com/html/html_lists.asp)
|
||||||
|
Reference in New Issue
Block a user