SearchMenu

Demo post — lists

This is the fourth post with tests and demo for lists elements with code snippets and explanations

Let`s go!

Ordered and unordered lists

    
    <ol class="list list_left">
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit. Aenean commodo ligula eget dolor. </li>
        <li>Cum sociis natoque penatibus et magnis dis 
        parturient montes, nascetur ridiculus mus. </li>
    </ol>    
    
Left-floated ordered list
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  3. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis.

Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum.

 
    <ul class="list list_left">
        <li>Lorem ipsum dolor sit amet consectetuer.</li>
        <li>Proin eu egestas metus, quis semper mauris.</li>
        <li>Cras arcu ligula, hendrerit ac tempus ac.</li>
    </ul>    
    
Left-floated unordered list
  • Lorem ipsum dolor sit amet consectetuer.
  • Proin eu egestas metus, quis semper mauris.
  • Cras arcu ligula, hendrerit ac tempus ac.

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Pellentesque euismod lorem id sagittis fermentum. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum.

 
    <ol class="list list_right">
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit. Aenean commodo ligula eget dolor. </li>
        <li>Cum sociis natoque penatibus et magnis dis 
        parturient montes, nascetur ridiculus mus. </li>
    </ol>     
    
Right-floated ordered list
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  3. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum.

 
    <ul class="list list_right">
        <li>Lorem ipsum dolor sit amet consectetuer.</li>
        <li>Aenean commodo ligula eget dolor.</li>
        <li>Aenean massa cum sociis natoque penatibus.</li>
    </ul>    
    
Right-floated unordered list
  • Lorem ipsum dolor sit amet consectetuer.
  • Aenean commodo ligula eget dolor.
  • Aenean massa cum sociis natoque penatibus.
  • Vestibulum ante ipsum primis in faucibus.
  • Proin eu egestas metus, quis semper mauris.
  • Cras arcu ligula, hendrerit ac tempus ac.

Sed in mauris ultricies, euismod nisi a, pharetra est. Mauris vitae porta diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada posuere posuere. Nullam adipiscing lacinia odio, sed bibendum leo scelerisque id. Proin eu egestas metus, quis semper mauris. Cras arcu ligula, hendrerit ac tempus ac, porta nec odio. Pellentesque euismod lorem id sagittis fermentum. Donec id dictum tortor, ac tincidunt mi. Ut elementum hendrerit lectus, a viverra quam adipiscing eleifend. Pellentesque a libero ipsum.

 
    <ol class="list list_left list_left-extra">
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit.</li>
        <li>Cum sociis natoque penatibus et magnis.</li>
        <li>Nulla consequat massa quis enim.</li>
    </ol>     
    
Left-floated ordered list with extra margin
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Cum sociis natoque penatibus et magnis.
  3. Nulla consequat massa quis enim.

Praesent commodo quam vel sem facilisis, non semper nisi malesuada. Ut vel blandit nunc. Nulla felis nunc, consectetur pharetra scelerisque nec, fermentum a odio. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum. Donec id dictum tortor, ac tincidunt mi. Ut elementum hendrerit lectus, a viverra quam adipiscing eleifend. Pellentesque a libero ipsum.

 
    <ul class="list list_left list_left-extra">
        <li>Lorem ipsum dolor sit amet consectetuer.</li>
        <li>Aenean commodo ligula eget dolor.</li>
        <li>Aenean massa cum sociis natoque penatibus.</li>
    </ul>        
    
Left-floated unordered list with extra margin
  • Lorem ipsum dolor sit amet consectetuer.
  • Aenean commodo ligula eget dolor.
  • Aenean massa cum sociis natoque penatibus.
  • Vestibulum ante ipsum primis in faucibus.
  • Proin eu egestas metus, quis semper mauris.

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Sed in mauris ultricies, euismod nisi a, pharetra est. Mauris vitae porta diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada posuere posuere. Nullam adipiscing lacinia odio, sed bibendum leo scelerisque id. Proin eu egestas metus, quis semper mauris. Cras arcu ligula, hendrerit ac tempus ac, porta nec odio.

 
    <ol class="list list_right list_right-extra">
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit.</li>
        <li>Cum sociis natoque penatibus et magnis.</li>
        <li>Nulla consequat massa quis enim.</li>
    </ol>        
    
Right-floated ordered list with extra margin
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Cum sociis natoque penatibus et magnis.
  3. Nulla consequat massa quis enim.

Praesent commodo quam vel sem facilisis, non semper nisi malesuada. Ut vel blandit nunc. Nulla felis nunc, consectetur pharetra scelerisque nec, fermentum a odio. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum. Donec id dictum tortor, ac tincidunt mi. Ut elementum hendrerit lectus, a viverra quam adipiscing eleifend. Pellentesque a libero ipsum.

 
    <ul class="list list_right list_right-extra">
        <li>Lorem ipsum dolor sit amet consectetuer.</li>
        <li>Aenean commodo ligula eget dolor.</li>
        <li>Aenean massa cum sociis natoque penatibus.</li>
    </ul>        
    
Right-floated unordered list with extra margin
  • Lorem ipsum dolor sit amet consectetuer.
  • Aenean commodo ligula eget dolor.
  • Aenean massa cum sociis natoque penatibus.
  • Vestibulum ante ipsum primis in faucibus.
  • Proin eu egestas metus, quis semper mauris.

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Sed in mauris ultricies, euismod nisi a, pharetra est. Mauris vitae porta diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada posuere posuere. Nullam adipiscing lacinia odio, sed bibendum leo scelerisque id. Proin eu egestas metus, quis semper mauris. Cras arcu ligula, hendrerit ac tempus ac, porta nec odio.


Share this post

If you like this post why don`t you share it with your friends?