papercss/docs/content/docs/content/lists.md
Louis Lazaris 012d8825aa
Fixed markup for nested lists
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.
2019-05-23 00:27:57 -04:00

2 KiB

title description
Lists PaperCSS Lists

Ordered Lists

  1. Do this
  2. Then this
  3. Finally this
  4. Then we'll go one deeper
    1. Dillon
    2. Francis
      1. What if we went...
      2. One more deeper?
        1. DJ
        2. Hanzel
          1. Five levels should be enough
          2. Right?
  5. But don't forget this

Unordered Lists

  • Let's try this
  • Let's try this again
    • And now we are nested
    • Pretty cool?
      • The list items are just text
      • From this font
        • We'll keep going
        • Until we hit
          • LEVEL 5
  • And now we're are the top!

Inline List

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Codes:

<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>