Nested And Mixed Lists

Nested and mixed lists are an interesting beast. It’s a corner case to make sure that

  • Lists within lists do not break the ordered list numbering order
  • Your list styles go deep enough

Ordered – Unordered – Ordered

  1. ordered item
  2. ordered item
    • unordered
    • unordered
      1. ordered item
      2. ordered item
  3. ordered item
  4. ordered item

Ordered – Unordered – Unordered

  1. ordered item
  2. ordered item
    • unordered
    • unordered
      • unordered item
      • unordered item
  3. ordered item
  4. ordered item

Unordered – Ordered – Unordered

  • unordered item
  • unordered item
    1. ordered
    2. ordered
      • unordered item
      • unordered item
  • unordered item
  • unordered item

Unordered – Unordered – Ordered

  • unordered item
  • unordered item
    • unordered
    • unordered
      1. ordered item
      2. ordered item
  • unordered item
  • unordered item

10 thoughts on “Nested And Mixed Lists

  1. uis dolor felis, porta et, molestie vitae, imperdiet eget, purus. Mauris iaculis. In cursus, neque eu sollicitudin ullamcorper, odio mauris tempus odio, id tincidunt metus leo vel ipsum. Quisque suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed libero. Nunc sollicitudin diam ac dui. Nunc faucibus auctor tortor. Quisque ipsum sem, hendrerit accumsan, congue ut, porttitor ut, turpis. Sed sollicitudin, leo et condimentum tempus, massa augue dictum est, iaculis posuere nulla felis quis tortor. Pellentesque ac nisl vitae nunc porta pretium. Prae

  2. uris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ac ipsum. Nunc vitae sapien sit amet tellus eleifend hendrerit. Phasellus orci nunc, fermentum eu, ultrices quis, dapibus vitae, lectus. Donec blandit ligula vitae justo. Quisque rutrum ante ac nisi. Sed at mi. Donec eget odio in est tempus malesuada. Done

  3. ulis urna ut leo mattis sagittis. Cras urna. Vestibulum malesuada orci eget leo.

    Etiam egestas auctor sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent feugiat. Donec vehicula, dui nec adipiscing ultricies, lorem urna eleifend arcu, eu congue libero lectus ac lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar pellentesque lacus. Suspendisse urna orci, rutrum a, placerat a, suscipit a, est. Aliquam ac odio. Fusce arcu lorem, sodales et, condimentum ultrices, fringilla ut, tellus. Quisque velit justo, molestie ac, imperdiet et, vulputate semper, dolor. Phasellus laoreet, sapien in molestie gravida, velit quam consequat enim, sit amet malesuada arcu justo vitae turpis. Aliquam orci lorem, ornare ut, congue nec, bibendum at, erat. Donec vitae nisl id risus euismod viverra. Pellentesque eleifend risus sit ame

  4. lit dignissim urna, vel suscipit massa enim ac nunc. Proin porta aliquet eros. Curabitur ut erat. Quisque vitae tortor.

    Duis imperdiet, mi eget euismod fermentum, odio nisl posuere quam, sit amet tristique urna diam at lacus. Duis congue lacus non ipsum. Donec felis tortor, lacinia at, rhoncus id, scelerisque ornare, nisi. Mauris felis ligula, pharetra vitae, posuere eget, tincidunt at, turpis. Donec eget ligula. Praesent fermentum dictum nisl. Phasellus enim. Nam placerat. Ut dignissim est nec lorem. Aliquam eros augue, rutrum et, placerat in, euismod in, libero. Morbi venenatis, eros non gravida rhoncus, leo metus ven

  5. usce leo nisi, ornare ut, ullamcorper ac, molestie et, quam. In vehicula arcu eu risus. Fusce ultrices lectus sit amet diam. Maecenas commodo risus eu diam. Maecenas at nibh. Nullam mattis pharetra dolor. Donec eleifend leo sit amet diam. Quisque ante. Aliquam erat volutpat.

    Maecenas vel lectus. Maecenas convallis lorem at risus. Nullam facilisis tortor. Quisque quis turpis. Suspendisse consectetur nisl. Integer facilisis, massa consectetur mattis sollicitudin, lectus elit pharetra eros, ut dignissim sapien nunc eu nisi. Nunc tortor. Vestibulum imperdiet. Aliquam erat volutpat. Integer fermentum tinci

  6. retra dolor. Donec eleifend leo sit amet diam. Quisque ante. Aliquam erat volutpat.

    Maecenas vel lectus. Maecenas convallis lorem at risus. Nullam facilisis tortor. Quisque quis turpis. Suspendisse consectetur nisl. In

  7. or vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit risus, pellentesque sed, imperdiet quis, pulvinar in, odio.

    Duis nulla diam, fringilla at, feugiat et, tincidunt consectetur, magna. Duis id est ac neque mollis ullamcorper. Nulla quis urna. Ut vitae nisi sit amet lectus blandit ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus consectetur nunc at sapien. Ut pellentesque laoreet diam. Morbi arcu neque, congue rhoncus, sollicitudin ut, condimentum id, lectus. Nulla facilisi. Praesent neque lacus, pretium eu, molestie at, laoreet convallis, metus. Fusce leo nisi, ornare ut, ullamcorper ac, molestie et, quam. In vehicula arcu eu risus. Fusce ultrices lectus sit amet diam. Maecenas commodo risus eu diam. Maecenas at nibh. Nullam mattis pharetra dolor. Donec eleifend leo sit amet diam. Quisque ante. Aliquam erat volu

Leave a Reply

Your email address will not be published. Required fields are marked *