Tweaking Ordered Lists

Here is a sample ordered list with custom CSS applied to change the seconds level so it looks like a paragraph extension of the parent list item. View the source of this page to see how it's constructed.


In hac habitasse platea dictumst. Suspendisse fringilla dui ac augue hendrerit ultrices. Pellentesque euismod turpis id erat porta nec pellentesque est ultricies. Quisque euismod scelerisque mollis. Nunc consequat vehicula lorem eget pellentesque. Vestibulum non cursus nisi. Nulla vel nisi eu sapien hendrerit tempus vel ac risus. Etiam quis ante lorem. Integer in magna vel tellus lacinia sollicitudin et ut risus. Maecenas ullamcorper pretium rhoncus. Integer sed sapien enim. Donec id enim nulla, a consectetur mi. Maecenas massa ipsum, interdum ac sodales eu, mollis non elit. Integer et arcu sed arcu suscipit dignissim. Sed facilisis, libero at pharetra egestas, nibh odio porta quam, dictum posuere arcu sem id leo. Aliquam elementum porttitor urna, a varius est pulvinar sed. Cras mollis nibh a odio varius cursus venenatis libero blandit. Donec sit amet pretium augue.

  1. let's start a numbered list
  2. second list item
    1. sub paragraph
  3. third item in the list
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere interdum magna eu molestie. Duis cursus nisi leo, id gravida orci. Praesent semper adipiscing massa, eu accumsan turpis elementum a. Nunc faucibus, nisl et semper luctus, orci elit dapibus tortor, in varius odio ligula quis diam.
    1. Pellentesque ipsum nibh, scelerisque ac facilisis sit amet, aliquam at sapien. Nulla facilisi. Curabitur viverra, nibh a venenatis fringilla, nunc erat euismod nibh, vitae elementum est urna in mi. Nam consectetur mi in urna lacinia et tempus purus hendrerit. Curabitur hendrerit iaculis pulvinar.
  5. Suspendisse a lorem quam. Ut ultricies elementum velit ac posuere. Ut non nibh a nisi facilisis dapibus. Nullam vel turpis massa, nec pretium leo. Vestibulum posuere rhoncus ante, vel ultrices ipsum tristique vitae. Vivamus dictum commodo ipsum et laoreet.

Maecenas hendrerit mi non nibh dapibus gravida. Phasellus feugiat tincidunt odio sed consequat. Cras sapien justo, rutrum non auctor vestibulum, tristique non metus. Nam feugiat pellentesque purus, ultrices scelerisque augue aliquam nec. Morbi pellentesque odio id risus fermentum eu congue libero iaculis. Morbi scelerisque scelerisque turpis, ut varius mauris dictum eu. Sed sem tellus, dictum et porttitor tincidunt, consequat nec felis. Nulla quis est non purus faucibus porttitor ut quis diam. Quisque lacus massa, dignissim euismod dapibus in, blandit nec erat. Aliquam varius lorem vel orci tempus suscipit. Vestibulum erat lorem, tincidunt ut eleifend id, imperdiet non urna. Curabitur viverra egestas erat vitae fermentum. Ut euismod fermentum bibendum. Ut et tellus eu magna pharetra congue.


Discuss This Article

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License