mirror of
https://github.com/papercss/papercss
synced 2024-06-07 16:32:15 +02:00
012d8825aa
It's a common mistake, but HTML lists should be nested so that a list is in between the opening and closing tags for a given list item. I've corrected it in these examples. Most browsers handle it fine but it's best to use correct HTML, just in case there's a browser or platform that doesn't parse it correctly.
108 lines
2 KiB
Markdown
108 lines
2 KiB
Markdown
---
|
|
title: Lists
|
|
description: PaperCSS Lists
|
|
---
|
|
|
|
### Ordered Lists
|
|
|
|
<ol>
|
|
<li>Do this</li>
|
|
<li>Then this</li>
|
|
<li>Finally this</li>
|
|
<li>Then we'll go one deeper
|
|
<ol>
|
|
<li>Dillon</li>
|
|
<li>Francis
|
|
<ol>
|
|
<li>What if we went...</li>
|
|
<li>One more deeper?
|
|
<ol>
|
|
<li>DJ</li>
|
|
<li>Hanzel
|
|
<ol>
|
|
<li>Five levels should be enough</li>
|
|
<li>Right?</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li>But don't forget this</li>
|
|
</ol>
|
|
|
|
### Unordered Lists
|
|
|
|
<ul>
|
|
<li>Let's try this</li>
|
|
<li>Let's try this again
|
|
<ul>
|
|
<li>And now we are nested</li>
|
|
<li>Pretty cool?
|
|
<ul>
|
|
<li>The list items are just text</li>
|
|
<li>From this font
|
|
<ul>
|
|
<li>We'll keep going</li>
|
|
<li>Until we hit
|
|
<ul>
|
|
<li>LEVEL 5</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>And now we're are the top!</li>
|
|
</ul>
|
|
|
|
### Inline List
|
|
|
|
<ul class="inline">
|
|
<li>Item 1</li>
|
|
<li>Item 2</li>
|
|
<li>Item 3</li>
|
|
<li>Item 4</li>
|
|
</ul>
|
|
|
|
#### Codes:
|
|
|
|
```html
|
|
<ol>
|
|
<li>Do this</li>
|
|
<li>Then this</li>
|
|
<li>Finally this</li>
|
|
<li>Then we'll go one deeper
|
|
<ol>
|
|
<li>Dillon</li>
|
|
<li>Francis
|
|
<ol>
|
|
<li>What if we went...</li>
|
|
<li>One more deeper?
|
|
<ol>
|
|
<li>DJ</li>
|
|
<li>Hanzel
|
|
<ol>
|
|
<li>Five levels should be enough</li>
|
|
<li>Right?</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li>But don't forget this</li>
|
|
</ol>
|
|
|
|
<!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! -->
|
|
|
|
<!-- For inline lists -->
|
|
<ul class="inline">...</ul>
|
|
```
|